@import '../../styles/main';

.CardCarousel {
  &__cards {
    display: flex;
    // overflow-x: hidden;
    overflow: hidden;

    & > div {
      // min-width: 288px;
      // min-height: 245px;
      margin-right: 20px;
      // padding: 24px;
      // background-color: white;
    }
  }

  &__control {
    display: flex;
    justify-content: center;
    margin-top: 70px;

    .arrow {
      width: 20px;
      height: 20px;
      color: #4038ff;
      cursor: pointer;
    }

    &__arrow-left {
      @extend .arrow;

      transform: matrix(0, -1, -1, 0, 0, 0);
    }

    &__arrow-right {
      @extend .arrow;

      transform: rotate(-90deg);
    }

    &__tracker {
      display: flex;
      align-items: center;
      width: 479px;
      height: 5px;
      margin: auto 20px;
      background-color: #dee3e9;

      &__position {
        width: 120px;
        height: 3px;
        background-color: #4038ff;
        border-radius: 2.5px;
      }
    }
  }

  @media (max-width: 1300px) {
    &__cards {
      // padding-left: 40px;
    }
  }

  @media #{$screen-max-sm} {
    &__control {
      &__tracker {
        display: none;
      }

      &__arrow-wrapper {
        margin: 0 15px;
        padding: 18px;
        border: 2px solid #4038ff;
      }

      &__arrow-wrapper:hover {
        cursor: pointer;
      }
    }
  }
}
