@use "../variables.scss";
@use "../mixins.scss";
@use "../urls.scss";
@use "../keyframes";
@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;

.welcome {
  position: absolute;
  color: white;
  font: 500 50px Montserrat, sans-serif;
  z-index: 5;
  top: 700px;
  left: 200px;
  text-shadow: 2px 2px 15px black;

  @media screen and (max-height: 1000px) {
    top: 550px;
  }

  @media screen and (max-height: 850px) {
    top:450px;
  }

  @media screen and (max-width: 850px) {
    left: 50px;
  }

  @media screen and (max-width: 600px) {
    top: 650px;
  }

  @media screen and (max-width: 400px) {
    font-size: 32px;
  }
}

.slideshow {
  list-style-type: none;

  @include mixins.header_overflow2 {
    height: calc(100vh - 45px);
  }
}

.slideshow {
  margin: 0;
  padding: 0;
  height: 80vh;
  z-index: 0;

  li span {
    position: absolute;
    width: 100%;
    height: 80vh;
    left: 0;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    opacity: 0;
    z-index: 0;
    animation: slideshow 30s linear infinite 0s;
  }

  li:nth-child(1) span {
    background-image: urls.$index_slide1;
  }
  li:nth-child(2) span {
    background-image: urls.$index_slide2;
    animation-delay: 6s;
  }
  li:nth-child(3) span {
    background-image: urls.$index_slide3;
    animation-delay: 12s;
  }
  li:nth-child(4) span {
    background-image: urls.$index_slide4;
    animation-delay: 18s;
  }
  li:nth-child(5) span {
    background-image: urls.$index_slide5;
    animation-delay: 24s;
  }
}

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