dropdown.scss

.day-month-dropdown {
  @include lg {
    position: relative;
    width: rem(100px);
  }
}

.day-month-dropdown__list {
  @include lg {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1;
    background: linear-gradient(0deg, rgba(24, 26, 32, 0.8), rgba(24, 26, 32, 0.8)), #05060A;
    border: rem(1px) var(--INFINITY) solid;
    border-bottom-left-radius: rem(6px);
    border-bottom-right-radius: rem(6px);
    border-top: 0;
    max-height: rem(384px);
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }
}

.day-month-dropdown__btn {
  @include lg {
    padding: rem(12px) rem(16px);
    color: var(--WHITE_TRANSPARENT);
    font-size: rem(16px);
    font-weight: 300;
    border: rem(1px) var(--INFINITY) solid;
    border-radius: rem(6px);
    background-color: var(--EIGHT_BALL);
    width: 100%;

    .day-month-dropdown--opened & {
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
      border-bottom-color: transparent;
    }
  }
}

.day-month-dropdown__list-item {
  @include lg {
    padding: rem(6px) rem(16px);
    width: 100%;

    .btn__text {
      display: block;
      text-align: left;
    }
  }
}

.day-month-dropdown__icon-arrow {
  @include lg {
    margin-left: rem(9px);
  }

  .day-month-dropdown--opened & {
    transform: rotate(180deg);
  }
}