/* DROPDOWN ----------------------------------- */

.fm-dropdown {
  position: relative;
  width: 100%;
  display: block;
  text-align: left;
  @include font-size($input-font-size);


  &.is-open,
  &.is-open.selected {
    z-index: 100;

    > button {
      color: $input-color;
      border-color: $input-color;
      background-image: var(--#{$prefix}svg-minus);

      + fieldset {
        display: block;
      }
    }

  }

  > button {
    width: 100%;
    text-align: left;
    z-index: 2;
    padding: $form-select-padding-y 0 $form-select-padding-y $form-select-padding-x;
    font-family: $form-select-font-family;
    font-weight: $form-select-font-weight;
    line-height: $form-select-line-height;
    color: $input-placeholder-color;
    background-color: $form-select-bg;
    border: $form-select-border-width solid $form-select-border-color;
    background-repeat: no-repeat;
    background-position: right $input-height-inner-quarter center;
    background-image: url(icon-plus($input-placeholder-color));
    background-size: 18px;

    @include transition(border-color .25s ease-in-out, color .25s ease-in-out);

    + fieldset {
      display: none;
      padding: 0;
      margin: 0;
      position: absolute;
      left: 0;
      overflow-y: auto;
      background-color: $body-bg;
      border-left: $border-width solid $black;
      border-right: $border-width solid $black;
      border-bottom: $border-width solid $black;
      width: 100%;
    }

    &:hover {
      color: $input-color;
      border-color: $input-color;
    }

    &:hover:not(:focus) {
      background-image: var(--#{$prefix}svg-plus);
    }

    &:focus {
      outline: 0;
      box-shadow: none;
      color: $input-color;
      border-color: $input-color;
    }

    &:disabled {
      opacity: $btn-disabled-opacity;
      pointer-events: none;
      @include box-shadow(none);
    }
  }

  &.disabled > button {
    opacity: $btn-disabled-opacity;
    pointer-events: none;
    @include box-shadow(none);
  }

  &.selected > button {
    color: $input-color;
  }


  &.fm-lined > button,
  &.fm-lined > button + fieldset {
    border: 0;
    border-bottom: $border-width solid $black;
    padding-right: 0;
    padding-left: 0;
    background-position: right center;

    > label,
    > label + label {
      padding-right: 0;
      padding-left: 0;


      &:hover {
        background-color: inherit;
        color: $input-placeholder-color;
        cursor: pointer;
      }

    }
  }

  > button + fieldset {

    input[type="radio"] {
      display: none;
    }

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

    > label,
    > label + label {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: $btn-padding-y $btn-padding-x;
      width: 100%;
      cursor: pointer;
      text-align: left;
      border-bottom: $border-width solid $black;

      &:hover {
        background-color: $gray-200;
        cursor: pointer;
      }

      &::after {
        content: attr(aria-label);
        font-size: $font-size-xs;
      }

      &.disabled {
        color: $gray-500;
        pointer-events: none;
        cursor: not-allowed;
      }

      &.selected {
        pointer-events: none;
        font-weight: $font-weight-bold;
      }
    }

  }
}