/**
 * Copyright (c) Matthieu Jabbour. All Rights Reserved.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */

// Dropdown's classes hierarchy is:
// .ui-dropdown
//   --primary
//   --secondary
//   --warning
//   --error
//   --disabled
//   --contained
//   --outlined
//   --text
//   --large
//   --small
//   __field
//   __clear-button
//     __icon
//   __label
//   __helper
//   __list
//     --top
//     --bottom
//     --expanded
//     __option
//       __option--disabled
//       __option--selected
//     __divider
//     __header
//
// Hint: to apply styling to a list of modifiers's children:
// &--[modifier1]#{&}--[modifier2]...#{&} & {
//   &__child {
//      ...
//   }
// }

.ui-dropdown {
  font-size: 1em;
  position: relative;
  user-select: none;
  pointer-events: all;
  box-sizing: border-box;

  &__field {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
  }

  &__list {
    position: absolute;
    opacity: 0;
    list-style: none;
    pointer-events: none;

    &--expanded {
      opacity: 1;
      z-index: 1;
      pointer-events: all;
    }

    &--top {
      bottom: 0;
    }

    &--bottom {
      top: 0;
    }

    &__divider {
      pointer-events: none;
    }

    &__option {
      cursor: pointer;

      &--disabled {
        pointer-events: none;
      }
    }
  }

  &--large {
    font-size: 1.2em;
  }

  &--small {
    font-size: 0.8em;
  }

  &--disabled {
    &__field {
      opacity: 0.5;
      pointer-events: none;
    }
  }
}