@use 'theme-variables' as *;

@mixin rotate($deg) {
  transform: rotate($deg);
  transition: transform 0.3s ease;
}

@include export-module('dropdownlist-layout') {
  .sf-ddl {
    user-select: none;
    cursor: pointer;

    &.sf-popup {
      border-radius: $ddl-border-radius;
      box-shadow: $ddl-popup-shadow;
      margin-top: $ddl-popup-margin;
      background: $ddl-bg-color;
      overflow-y: hidden;
      border: $ddl-border;
      cursor: auto;

      > :first-child {
        max-height: inherit;
        display: flex;
        flex-direction: column;
        padding: $ddl-medium-popup-padding;
      }

      > .sf-small {
        padding: $ddl-small-popup-padding;
      }

      > .sf-large {
        padding: $ddl-large-popup-padding;
      }
    }

    &.sf-dropdown-resizable .sf-medium {
      padding-bottom: $ddl-resize-icon-padding;
    }
  }

  .sf-dropdown {
    .sf-icon-rotate {
      @include rotate(180deg);
    }

    .sf-icon-normal {
      @include rotate(0deg);
    }
  }

  .sf-ddl-filter-parent {
    display: block;
    padding: $spacing-4 $spacing-12;
    flex: 0 0 auto;
  }

  .sf-dropdown-list {
    pointer-events: none;

    &.sf-input-value-template {
      width: 0;
    }
  }

}