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

$table-item_img_width_l: 150px;
$table-item_img_width: 100px;
$table-item_img_width_s: 60px;
$table-item_margin_between_items: 10px;

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

.showcase {
  display: flex;
  height: 90vh;
  background-image: urls.$index_showcase_bg_day;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;

  @include mixins.header_overflow2 {
    height: 95vh;
  }
}

.showcase-animation {
  animation: slideshow-appear 1000ms;
}

@keyframes slideshow-appear {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.araclar {
  text-align: center;
  font: 600 32px "Montserrat", sans-serif;
}

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

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

    p {
      font: x-large sans-serif;

      @include mixins.mx_index_brands_fix {
        font-size: large;
      }

      @include mixins.mx_index_brands_fix2 {
        font-size: 18px;
      }

      @include mixins.mx_mobile {
        font-size: 16px;
      }
    }

    img {
      align-self: center;
      margin-right: math.div(variables.$px_horizontalPadding, 10);
      width: $table-item_img_width_l;

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

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

      @include mixins.mx_mobile {
        margin: 0 0 2px 0;
        width: $table-item_img_width;
      }
    }

    hr {
      min-height: 100%;
      max-height: 100vh;
      width: 5px;
      background: variables.$clr_brand;
      margin-right: 9 * math.div(variables.$px_horizontalPadding, 10) - 5;

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

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

      @include mixins.mx_mobile {
        width: $table-item_img_width + 20px;
        border: solid 1px variables.$clr_brand;
        margin: 0 0 18px 0;
      }
    }

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

    @include mixins.mx_mobile {
      flex-direction: column;
      align-items: center;
    }
  }

  .reverse {
    // reverse is a property given to .table-item elements
    // it contains styling for img 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);
      }
    }

    hr {
      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);
      }

      @include mixins.mx_mobile {
        margin: 0 0 18px 0;
      }
    }

    @include mixins.mx_mobile {
      flex-direction: column;

      img {
        margin: 0 0 2px 0;
        width: $table-item_img_width;
      }
    }
  }

  .square {
    img {
      height: $table-item_img_width_l;
      width: auto;

      @include mixins.mx_index_brands_fix {
        height: $table-item_img_width;
      }

      @include mixins.mx_index_brands_fix2 {
        height: $table-item_img_width_s;
      }

      @include mixins.mx_mobile {
        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: variables.$clr_brand_gradient;
  color: white;

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

  nav {
    display: flex;

    .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;
      }

      @include mixins.mx_mobile {
        margin: 0 0 30px 0;
      }
    }
  }

  @include mixins.mx_mobile {
    flex-direction: column;

    p {
      font-size: 20px;
      font-weight: 600;
      text-align: center;
    }

    nav {
      .social-button {
        margin-right: 10px;
      }
    }
  }
}