@import '../../mixins/z-index';
@import './dropdown-button';
@import './dropdown-filter';
@import '../../mixins/scrollbar';
@import '../../mixins/focus-state';

:host {
  display: block;
  position: relative;
  font: var(--tds-detail-02);
  letter-spacing: var(--tds-detail-02-ls);

  .label-outside {
    font: var(--tds-detail-05);
    letter-spacing: var(--tds-detail-05-ls);
    color: var(--tds-dropdown-label-color);
    margin-bottom: 8px;

    &.disabled {
      color: var(--tds-dropdown-disabled-color);
    }
  }

  .dropdown-select {
    position: relative;

    button:focus {
      @include tds-focus-state;

      border-radius: 0;
    }

    button {
      transition: border-bottom-color var(--tds-motion-duration-fast-02)
        var(--tds-motion-easing-scania);
    }

    button:hover {
      border-bottom-color: var(--tds-dropdown-border-bottom-hover);
    }

    button {
      border-bottom-color: var(--tds-dropdown-border-bottom);
    }

    button.error {
      border-bottom-color: var(--tds-dropdown-error);
    }

    button.error:focus {
      border-bottom-color: transparent;
    }

    &.disabled {
      .label-inside,
      .placeholder,
      .label-inside-as-placeholder,
      .value-wrapper {
        color: var(--tds-dropdown-disabled-color);
      }

      button {
        border: none;
      }
    }

    .label-inside {
      position: absolute;
      font: var(--tds-detail-07);
      letter-spacing: var(--tds-detail-07-ls);
      color: var(--tds-dropdown-label-inside-color);

      &.lg {
        top: 12px;
        left: 16px;
      }

      &.md {
        top: 8px;
        left: 16px;
      }

      &.sm {
        display: none;
      }

      &.xs {
        display: none;
      }

      & + .placeholder:not(.sm) {
        margin-top: 8px;
      }
    }

    .placeholder {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-right: var(--tds-placeholder-margin);

      /* To center the text vertically */
      &.xs {
        line-height: 1;
      }
    }

    .label-inside-as-placeholder {
      color: var(--tds-dropdown-placeholder-color);

      &.selected {
        position: absolute;
        font: var(--tds-detail-07);
        letter-spacing: var(--tds-detail-07-ls);
        transition: all 0.2s ease-in-out;

        &.lg {
          top: 12px;
        }

        &.md {
          top: 8px;
        }

        &.sm {
          display: none;
        }

        & + .placeholder:not(.sm) {
          margin-top: 8px;
        }
      }
    }

    &.lg {
      height: 55px;
    }

    &.md {
      height: 47px;
    }

    &.sm {
      height: 39px;
    }

    &.xs {
      height: 29px;
    }
  }

  .helper {
    margin-top: 4px;
    color: var(--tds-dropdown-helper-color);
    font: var(--tds-detail-05);
    letter-spacing: var(--tds-detail-05-ls);
    display: flex;
    align-items: center;
    gap: 8px;

    &.error {
      color: var(--tds-dropdown-error);
    }

    &.disabled {
      color: var(--tds-dropdown-disabled-color);
    }
  }

  .dropdown-list {
    z-index: tds-z-index(dropdown);
    position: absolute;
    width: 100%;
    transform-origin: top;
    box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.1);
    border-radius: var(--tds-dropdown-list-border-radius-down);
    overflow-y: auto;
    transform: scaleY(0);
    pointer-events: none;
    @include tds-scrollbar;

    &.lg {
      max-height: 312px;
    }

    &.md {
      max-height: 312px;
    }

    &.sm {
      max-height: 260px;
    }

    &.xs {
      max-height: 260px;
    }

    &.up {
      bottom: 100%;
      margin-top: 0;
      margin-bottom: 1px;
      transform-origin: bottom;
      display: flex;
      flex-direction: column-reverse;
      border-radius: var(--tds-dropdown-list-border-radius-up);

      &.label-outside {
        bottom: calc(100% - 24px);
      }
    }

    &.closed {
      transform: scaleY(0);
      pointer-events: none;
    }

    &.open {
      transform: scaleY(1);
      visibility: visible;
      opacity: 1;
      pointer-events: auto;
    }

    &.animation-enter-slide {
      transition: transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-enter);
    }

    &.animation-exit-slide {
      transition: transform var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-exit);
    }

    .no-result {
      font: var(--tds-detail-02);
      letter-spacing: var(--tds-detail-02-ls);
      display: flex;
      align-items: center;
      padding: 0 16px;
      background-color: var(--tds-dropdown-bg);

      &.lg {
        height: 56px;
      }

      &.md {
        height: 48px;
      }

      &.sm {
        height: 40px;
      }

      &.xs {
        height: 40px;
      }
    }
  }

  .menu-icon {
    color: var(--tds-dropdown-menu-icon-color);
  }

  tds-icon {
    transition: transform var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania);

    &.open {
      transform: rotateZ(180deg);
    }
  }
}