$label-color: $color-controlelement;
$label-active-padding: $spacing-xxxs;
$dropdown-size-md: $size-xl;
$dropdown-size-sm: $size-l;
$horizontal-padding: $spacing-xs;
$dropdown-radius: $radius-control;
$border-size: $border-xs;
$border-color: $color-controlborder;
$border-color-hover: $color-controlborder--hover;
$text-color: $color-control;
$icon-size: $size-xs;
$icon-color: $color-controlelement;
$horizontal-spacing: $spacing-xxs;

$opened-label-color: $color-primary;
$opened-border-color: $color-primary;

$error-border-size: $border-s;
$error-border-color: $color-alert;
$error-label-color: $color-alert;
$error-text-color: $color-alert;
$error-size: $size-xs;

$animation-function: cubic-bezier(0.4, 0, 0.2, 1);
$animation-time: 150ms;

$dropdown-item-size: $size-l;
$dropdown-item-spacing: $spacing-xs;
$dropdown-item-background: $color-controlbase;
$dropdown-item-background--hover: $color-controlbase--lighten;
$dropdown-item-background--active: $color-controlbase--lighten;
$dropdown-item-color: $color-control;

$dropdown-group-title-size: $size-s;
$dropdown-group-title-background: rgba(255, 255, 255, .1);

$dropdown-menu-min-width: 100px;
$dropdown-menu-margin-top: $spacing-xxs;
$dropdown-menu-background: $color-controlbase;
$dropdown-menu-radius: $radius-control;
$dropdown-menu-shadow: $style-elevate;
$dropdown-menu-divider-height: $border-xs;
$dropdown-menu-divider-color: $color-controlborder;

$reset-icon-size: $size-xs;
$reset-button-padding: $spacing-xxxs;

.dropdown {
  display: block;
  position: relative;

  &.dropdown--size-md {
    .handle {
      height: $dropdown-size-md;
    }
    .value {
      div {
        height: $dropdown-size-md;
        &.value-text {
          margin-top: -$dropdown-size-md;
        }
      }
    }
  }

  &.dropdown--size-sm {
    .handle {
      height: $dropdown-size-sm;
    }
    .value {
      div {
        height: $dropdown-size-sm;
        &.value-text {
          margin-top: -$dropdown-size-sm;
        }
      }
    }
  }

  &.dropdown--disabled {
    .handle {
      cursor: default;
    }
  }

  .handle {
    position: relative;
    display: flex;
    align-items: center;
    padding: 0 $horizontal-padding;
    cursor: pointer;
  }

  .value {
    position: relative;
    width: 100%;
    div {
      display: flex;
      align-items: center;
      &.value-text {
        opacity: 0;
        pointer-events: none;
      }
    }
  }
  .search {
    position: absolute;
    left: $horizontal-padding;
    top: 0;
    right: 0;
    height: 100%;
    opacity: 0;
    z-index: 2;
    input {
      width: 100%;
      height: 100%;
      padding-right: $horizontal-padding + $icon-size + $horizontal-spacing;
      background: none;
      border: none;
      color: $color-control;
      outline: none;
      cursor: pointer;
    }
  }

  .selector {
    margin-left: $horizontal-spacing;
    display: flex;
    align-items: center;

    mtg-svg-icon {
      width: $icon-size;
      height: $icon-size;
      color: $icon-color;
      transition: transform $animation-time $animation-function;
    }
  }

  .reset {
    position: relative;
    z-index: 2;
    box-sizing: content-box;
    width: $reset-icon-size;
    height: $reset-icon-size;
    padding: $reset-button-padding;
    margin-left: -$reset-button-padding;
  }

  .outline {
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    width: 100%;
    height: 100%;
    pointer-events: none;

    .start {
      width: 12px;
      border: $border-size solid;
      border-right: none;
      border-radius: $dropdown-radius 0 0 $dropdown-radius;
    }
    .center {
      position: relative;
      display: flex;
      align-items: flex-start;
      flex: 0 0 auto;
      width: auto;
      max-width: calc(100% - 12px * 2);
      border-top: $border-size solid;
      border-bottom: $border-size solid;
      padding: 0 $horizontal-padding - 12px;
      .label {
        position: relative;
        top: 50%;
        transition: top $animation-time $animation-function, transform $animation-time $animation-function, color $animation-time $animation-function;
        transform: translateY(-50%);
        @include font-control-label();
        color: $label-color;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .end {
      flex-grow: 1;
      border: $border-size solid;
      border-left: none;
      border-radius: 0 $dropdown-radius $dropdown-radius 0;
    }
    .start,
    .center,
    .end {
      border-color: $border-color;
    }
  }

  &:hover {
    .outline {
      .start,
      .center,
      .end {
        border-color: $border-color-hover;
      }
    }
  }

  &.dropdown--filled:not(.dropdown--without-label) {
    .outline {
      .center {
        border-top: none;
        padding: 0 $label-active-padding;
        .label {
          top: 0!important;
          transform: translateY(-50%)!important;
          @include font-control-focuslabel();
        }
      }
    }
  }
  &.dropdown--opened {
    .selector {
      mtg-svg-icon {
        transform: rotate(180deg);
        transform-origin: center;
      }
    }
    .outline {
      .start,
      .center,
      .end {
        border-color: $opened-border-color;
      }
    }
    &.dropdown--filled {
      .outline .center .label {
        color: $opened-label-color;
      }
    }
    &.dropdown--with-search {
      .value {
        opacity: 0;
      }

      .search {
        opacity: 1;
        input {
          cursor: text;
        }
      }

      &:not(.dropdown--filled) {
        .label {
          opacity: 0;
        }
      }
    }
  }

  &.dropdown--error {
    .outline {
      .start,
      .center,
      .end {
        border-width: $error-border-size;
        border-color: $error-border-color;
      }
      .center {
        .label {
          color: $error-label-color;
        }
      }
    }
  }

  .error-text {
    width: 100%;
    height: $error-size;
    line-height: $error-size;

    padding: 0 $horizontal-padding;
    @include font-control-errortext();
    color: $error-text-color;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.dropdown-group {
  display: block;

  .title {
    display: flex;
    align-items: center;
    height: $dropdown-group-title-size;
    padding: 0 $dropdown-item-spacing;
    background: $dropdown-group-title-background;
    @include font-h6();
    color: $color-control;
  }
}

.dropdown-item {
  display: flex;
  align-items: center;
  //justify-content: space-between;
  height: $dropdown-item-size;
  @include font-control-label();
  background: $dropdown-item-background;
  padding: 0 $dropdown-item-spacing;
  cursor: pointer;
  color: $dropdown-item-color;
  &:hover {
    background: $dropdown-item-background--hover;
  }
  &.active {
    background: $dropdown-item-background--active;
  }
  &.hidden {
    display: none;
  }

  .check-icon {
    margin-left: auto;
  }
}

.dropdown-menu {
  width: 100%;
  min-width: $dropdown-menu-min-width;
  margin: $dropdown-menu-margin-top 0;
  background: $dropdown-menu-background;
  box-shadow: $dropdown-menu-shadow;
  border-radius: $dropdown-menu-radius;
  max-height: $dropdown-item-size * 5;
  overflow: auto;

  .divider {
    height: $dropdown-menu-divider-height;
    background: $dropdown-menu-divider-color;
  }
}