@use "../variables.scss";
@use "../mixins.scss";
@use "sass:math";

$table-item_img_width: 100px;
$table-item_margin_between_items: 10px;

$social-button_img_width: 32px;
$social-button_inner_margin: 10px;

.showcase {
  display: flex;
  height: 100vh;
  background-image: url("../../resources/img/index/g.jpg"), url("../../resources/img/index/y.jpg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  backdrop-filter: brightness(0%);
}

.table {
  display: flex;
  flex-direction: column;

  .table-item {
    margin-top: $table-item_margin_between_items;
    display: inline-flex;
    flex-direction: row;
    align-items: center;

    img {
      margin-right: math.div(variables.$px_horizontalPadding, 10);
      height: auto;
      width: $table-item_img_width;

      @include mixins.mx_index_brands_fix {
        margin-right: math.div(variables.$px_horizontalPadding2, 10);
      }

      @include mixins.mx_index_brands_fix2 {
        margin-right: math.div(variables.$px_horizontalPadding2, 10);
      }
    }

    &:first-of-type {
      margin-top: 0;
    }
  }

  .vertical-separator {
    // vertical-separator makes an empty div behave as a separator which aligned vertically
    height: $table-item_img_width + 20px;
    border: solid 1px variables.$clr_brand;
    margin-right: 9 * math.div(variables.$px_horizontalPadding, 10);

    @include mixins.mx_index_brands_fix {
      margin-right: 9 * math.div(variables.$px_horizontalPadding2, 10);
    }

    @include mixins.mx_index_brands_fix2 {
      margin-right: 9 * math.div(variables.$px_horizontalPadding3, 10);
    }
  }

  .reverse {
    // reverse is a property given to .table-item elements
    // it contains styling for img, p and .vertical-separator elements contained under
    // a .table-item element
    flex-direction: row-reverse;

    img {
      margin-right: 0;
      margin-left: math.div(variables.$px_horizontalPadding, 10);;

      @include mixins.mx_index_brands_fix {
        margin-left: math.div(variables.$px_horizontalPadding2, 10);
      }

      @include mixins.mx_index_brands_fix2 {
        margin-left: math.div(variables.$px_horizontalPadding3, 10);
      }
    }

    p {
      text-align: right;
    }

    .vertical-separator {
      margin-right: 0;
      margin-left: 9 * math.div(variables.$px_horizontalPadding, 10);;

      @include mixins.mx_index_brands_fix {
        margin-left: 9 * math.div(variables.$px_horizontalPadding2, 10);
      }

      @include mixins.mx_index_brands_fix2 {
        margin-left: 9 * math.div(variables.$px_horizontalPadding3, 10);
      }
    }
  }

  .square {
    img {
      height: $table-item_img_width;
    }
  }

  .table-item-animation {
    animation: slide-in-right 3000ms;
  }

  .table-item-animation-reverse {
    animation: slide-in-left 3000ms;
  }

  @keyframes slide-in-left {
    from {
      transform: translateX(-5%);
      opacity: 0;
    }

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }

  @keyframes slide-in-right {
    from {
      transform: translateX(+5%);
      opacity: 0;
    }

    to {
      transform: translateX(0%);
      opacity: 1;
    }
  }
}

.social {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(to left, variables.$clr_brand, #3b8fff);
  color: white;

  p {
    font: 700 $social-button_img_width "Montserrat", sans-serif;
  }

  .social-button {
    display: inline-block;
    height: $social-button_img_width + (2 * $social-button_inner_margin);
    width: auto;
    border: 2px solid white;
    border-radius: 50%;
    margin: 0 10px 0 0;

    img {
      margin: 10px;
      height: $social-button_img_width;
      width: $social-button_img_width;
    }

    &:hover {
      background-color: white;

      img {
        filter: brightness(0) saturate(100%) invert(29%) sepia(52%) saturate(2311%) hue-rotate(197deg) brightness(87%) contrast(88%);
      }
    }

    &:last-of-type {
      margin: 0;
    }
  }
}