@use "../mixins/media-queries";
@use '../fonts/poppins';
@use '../fonts/volkhov';

.product {
  position: relative;

  @include media-queries.lg {
    display: flex;
    gap: 65px;
    height: 640px;
    margin-top: 90px;
  }

  &__slider {

    @include media-queries.lg {
      flex: 1 1 auto;
      max-width: 800px;
    }
  }

  &__data {
    position: relative;

    &--desktop {
      flex: 0 1 460px;
      padding: 38px 0;

      .product {
        &__title, &__subtitle, &__confidence {
          display: none;
        }
      }

      @include media-queries.lg {
        border: 1px solid #D9D9D9;
        padding: 38px 32px;

        .product {
          &__title, &__subtitle, &__confidence {
            display: block;
          }
        }
      }
    }

    &--mobile {
      border: none;

      @include media-queries.lg {
        display: none;
      }
    }
  }

  &__title {
    @extend .poppins-medium;
    font-size: 30px;
    text-align: left;
    margin-bottom: 14px;
  }

  &__subtitle {
    font-size: 12px;
    font-weight: 500;
    color: #8A8A8A;
  }

  &__badge-list {
    margin-bottom: 12px;
  }

  &__description {
    @extend .poppins-medium;
    font-size: 12px;
    margin: 16px 0;
    line-height: 26px;
    color: #484848;

  }

  &__confidence {
    font-size: 12px;
    font-weight: 500;
    color: #8A8A8A;
    margin-bottom: 28px;
    position: relative;
  }

  &__media {
    &-item {
      line-height: 36px;
      margin-bottom: 10px;
    }
  }

  .slick-slider {
    height: 550px;
    width: auto;

    @include media-queries.sm {
      height: 580px;
    }

    @include media-queries.lg {
      position: relative;
      height: 640px;
      width: 640px;
    }
  }

  .slick-list {
    border: 1px solid rgba(217, 217, 217, 1);
    height: 480px;

    @include media-queries.lg {
      width: 480px;
    }

    @include media-queries.md {
      margin-right: 98px;
      height: 640px;
    }
  }

  .slick-dots {
    position: relative;
    margin-top: 20px;
    bottom: 0;

    @include media-queries.md {
      top: 0;
      right: 0;
      width: 94px;
      position: absolute;
      margin: 0;
    }

    li {
      overflow: hidden;
      margin: 0 5px;
      border: 1px solid rgba(217, 217, 217, 1);
      width: 15%;
      height: 50px;

      @include media-queries.sm {
        height: 80px;
      }

      @include media-queries.md {
        width: 94px;
        height: 114px;
        margin: 0;
      }

      @include media-queries.lg {
        margin-bottom: 15px;
      }

      &.slick-active {
        border: 2px solid rgba(0, 0, 0, 1);
      }
    }
  }
}