@use "src/styles/variables" as *;

.vm-timezones {

  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: $padding-small;
    cursor: pointer;

    &_selected {
      border: $border-divider;
      padding: $padding-small $padding-global;
      border-radius: $border-radius-small;
    }

    &__title {
      display: flex;
      align-items: center;
      gap: $padding-small;
      text-transform: capitalize;

      svg {
        width: 14px;
        color: $color-warning;
      }
    }

    &__utc {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background-color: $color-hover-black;
      padding: calc($padding-small/2);
      border-radius: $border-radius-small;
    }

    &__icon {
      display: inline-flex;
      align-items: center;
      justify-content: flex-end;
      margin: 0 0 0 auto;
      transition: transform 200ms ease-in;

      svg {
        width: 14px;
      }

      &_open {
        transform: rotate(180deg);
      }
    }
  }

  &-list {
    max-height: 300px;
    background-color: $color-background-block;
    border-radius: $border-radius-medium;
    overflow: auto;

    &_mobile {
      max-height: calc(($vh * 100) - 70px);
    }

    &_mobile &-header__search {
      padding: 0 $padding-global 0;
    }

    &-header {
      position: sticky;
      top: 0;
      background-color: $color-background-block;
      z-index: 2;
      border-bottom: $border-divider;

      &__search {
        padding: $padding-small;
      }
    }

    &-group {
      padding: $padding-small 0;
      border-bottom: $border-divider;

      &:last-child {
        border-bottom: none;
      }

      &__title {
        font-weight: bold;
        color: $color-text-secondary;
        padding: $padding-small $padding-global;
      }

      &-options {
        display: grid;
        align-items: flex-start;

        &__item {
          padding: $padding-small $padding-global;
          transition: background-color 200ms ease;

          &:hover {
            background-color: rgba($color-black, 0.1);
          }
        }
      }
    }
  }
}
