@import "src/style/vars_mixins";

.custom-dropdown {
  display: inline-flex;
  position: relative;
  border-radius: 6px;

  .dropdown-btn {
    display: inline-flex;
    align-items: center;
    cursor: pointer;

    .label {
      font-size: 18px;
      margin-right: 6px;
      font-weight: 500;
      line-height: 100%;
    }

    .menu-down {
      align-items: center;
      background: transparent;
      border-radius: 50%;
      display: flex;
      height: 28px;
      height: 28px;
      justify-content: center;
      width: 28px;
      user-select: none;

      svg {
        width: 20px;
      }
    }

    @include themify(day) {
      @apply text-blue-dark-sky;
    }

    @include themify(night) {
      @apply text-blue-pastel;
    }

    &.hover,
    &:hover {
      .menu-down {
        @include themify(day) {
          @apply bg-blue-duck-egg;
        }

        @include themify(night) {
          @apply bg-blue-dark-grey;
        }
      }
    }
  }

  .the-menu {
    position: absolute;
    top: 100%;
    z-index: 111;
  }

  &.align-bottom {
    .the-menu {
      top: auto;
      bottom: 100%;
    }
  }

  &.float-left {
    .the-menu {
      left: 0;
    }
  }

  &.float-right {
    .the-menu {
      right: 0;
    }

    &.with-padding {
      .the-menu {
        right: 16px;
      }
    }
  }

  .menu-inner {
    margin-top: 4px;
    display: table;
    box-shadow: $box-shadow;
    border-radius: $border-radius;

    @include themify(day) {
      @apply bg-white;
    }

    @include themify(night) {
      @apply bg-dark-600-010-light;
    }

    z-index: 3;

    .menu-header {
      padding: 8px 20px;
      font-weight: 500;
      @apply bg-blue-dark-sky;
      @apply text-white;
      border-top-left-radius: 6px;
      border-top-right-radius: 6px;
    }
  }

  .menu-list {
    padding: 18px 40px 18px 0;

    .menu-item {
      cursor: pointer;
      font-weight: 500;
      border-top-right-radius: 25px;
      border-bottom-right-radius: 25px;

      @include themify(day) {
        @apply text-gray-warm;
      }

      @include themify(night) {
        @apply text-silver;
      }

      &:not(:last-child) {
        margin-bottom: 10px;
      }

      .item-inner {
        margin-left: 20px;
        padding: 8px 20px;
        border-radius: 25px;
        display: flex;
        white-space: nowrap;
        align-items: center;

        .item-icon {
          display: flex;

          svg {
            height: 14px;
            margin-right: 6px;
          }
        }
      }

      &.active {
        .item-inner {
          @apply text-white;

          @include themify(day) {
            @apply bg-blue-dark-sky;
          }

          @include themify(night) {
            @apply bg-blue-metallic;
          }
        }
      }

      &.no-margin {
        margin-top: 0 !important;
      }

      &:hover:not(.active, .static) {
        @include themify(day) {
          @apply bg-blue-dark-sky-040;
          @apply text-blue-dark-sky;
        }

        @include themify(night) {
          @apply bg-dark-600-010-light;
        }
      }
    }
  }
}
