@use "../variables.scss";
@use "../mixins.scss";

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

.showcase {
  display: flex;
  height: 100vh;
  background-image: url("../../resources/img/showcase.jpg");
  backdrop-filter: brightness(0%);

  img {
    width: 100%;
    height: auto;
    filter: brightness(50%);
  }

  h1 {
    text-align: center;
    font: 800 128px "Montserrat", sans-serif;
    color: #FFFFFF;
  }
}

.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: $table-item_margin_img_to_paragraph;
      height: auto;
      width: $table-item_img_width;
    }
  }

  .reverse {
    flex-direction: row-reverse;

    img {
      margin-right: 0;
      margin-left: $table-item_margin_img_to_paragraph;
    }

    p {
      text-align: right;
    }

    .vertical-separator {
      margin-right: 0;
      margin-left: $table-item_margin_img_to_paragraph;
    }
  }

  .vertical-separator {
    height: $table-item_img_width + 20px;
    border: solid 1px variables.$clr_brand;
    margin-right: $table-item_margin_img_to_paragraph;
  }

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

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

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

  @keyframes fade-in {
    from {
      margin-left: 10%;
      width: 105%;
      opacity: 0;
    }

    to {
      margin-left: 0;
      width: 100%;
      opacity: 1;
    }
  }

  @keyframes fade-in-reverse {
    from {
      margin-right: 10%;
      width: 105%;
      opacity: 0;
    }

    to {
      margin-right: 0;
      width: 100%;
      opacity: 1;
    }
  }

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

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

  @keyframes slide-in-right {
    from {
      margin-left: 100%;
      width: 300%;
      opacity: 0;
    }

    to {
      margin-left: 0;
      width: 100%;
      opacity: 1;
    }
  }
}