.Dropdown {
  $this: &;
  display: inline-block;

  &:focus {
    outline: none;
    box-shadow: $shadow-near;
  }

  &--rightalign {
    display: flex;
    flex-direction: column;
    align-items: flex-end;

    #{$this}__panel#{$this}__panel--open {
      margin-top: 36px;
    }
  }

  &--segmented {
    display: block;
    #{$this}__button {
      width: 100%;

      &__icon {
        padding-left: 12px;
      }

      &:hover &__icon {
        background: $color-gray-120;
      }

      &:active &__icon {
        background: $color-gray-120;
        border: 1px solid $color-gray-80;
        padding: 3px;
      }

      &:focus &__icon {
        background: $color-white;
        border: 2px solid $color-gray-50;
        padding: 2px;
      }

      &:disabled &__text {
        color: black;
      }

      &__content {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      &__legacyText {
        font-size: 16px;
        text-transform: capitalize;
      }
    }

    #{$this}__panel#{$this}__panel--open {
      border-radius: 0 0 4px 4px;
      margin-top: 20px;
    }

    #{$this}__item__sectionheader {
      padding-bottom: 10px;
      margin-bottom: -4px;
    }

    #{$this}__item__headertext {
      font-size: 12px;
      line-height: 16px;
    }

    #{$this}__item__sectionheader {
      padding: 0 0 8px 8px;
    }
  }

  &--legacySegmented {
    #{$this}__button {
      height: 56px;
      border-top: 0;
      border-left: 0;
      border-right: 0;
      border-bottom: 1px solid $color-gray-120;
      border-radius: 0;
      transition-property: border-color;
      transition-duration: 0s;
      padding: 9px 16px 7px;
      box-shadow: none;

      &__icon {
        background: $color-gray-140;
        border-radius: 4px;
        padding: 4px;
      }

      &__text {
        font-weight: $weight-medium;
      }
    }

    &#{$this}--open #{$this}__button {
      border-bottom: none;
    }

    #{$this}__panel#{$this}__panel--open {
      border-radius: 0 0 4px 4px;
      margin-top: 0px;
    }

    #{$this}__item__headertext {
      font-size: 9px;
      line-height: 12px;
    }

    #{$this}__item__sectionheader {
      padding: 8px;
    }
  }

  &__item {
    border: none;
    box-shadow: none;
    display: flex;
    padding: 0;
    max-width: 240px;

    &--active {
      background: $color-gray-140;
      border-radius: 2px;
      transition: $motion-quint-easeinout $motion-speed-quick;
    }

    &__button {
      display: inline-block;
      font-family: 'DINNextLTPro', sans-serif;
      font-size: 14px;
      font-weight: $weight-normal;
      letter-spacing: $letter-spacing-normal;
      padding: 8px;
      width: 100%;

      &:disabled {
        border-color: $color-gray-100;
        background: $color-white;
        box-shadow: none;
        color: $color-gray-80;
      }
    }

    &__caption {
      color: $color-gray-60;
      font-size: 14px;
      font-weight: $weight-normal;
      letter-spacing: $letter-spacing-normal;
      line-height: 20px;
      padding: 2px 0 0 0;
      text-transform: none;
      text-align: left;
    }

    &__content {
      align-items: center;
      display: flex;
      justify-content: space-between;
      width: 100%;
    }

    &--destructive {
      color: $color-red-dark;

      &#{$this}__item--active {
        background: $color-red-lighter;
        border-radius: 2px;
        transition: $motion-quint-easeinout $motion-speed-quick;
      }

      &:disabled,
      &#{$this}__item--disabled {
        color: $color-red-light;
      }
    }

    &:disabled,
    &--disabled {
      background: white;
      cursor: not-allowed;
    }

    &__headertext {
      color: $color-gray-60;
      font-size: 12px;
      font-weight: $weight-medium;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      line-height: 16px;

      &--small {
        font-size: 9px;
        line-height: 16px;
        letter-spacing: 1px;
      }
    }

    &__headercaption {
      padding-top: 8px;
    }

    &__sectionheader {
      display: block;
      padding: 8px;
    }

    &__supporting-label {
      color: $color-gray-60;
      font-size: 10px;
      font-weight: $weight-medium;
      text-align: right;
      text-transform: uppercase;
      letter-spacing: $letter-spacing-loose;
      line-height: 16px;
    }

    &__supporting-text {
      padding-top: 4px;
    }

    &__text {
      padding-top: 2px;
      text-align: left;
      width: 100%;

      &--has-icon-left {
        padding-left: 8px;
      }
    }
  }

  &__panel {
    &#{$this}__panel--open {
      display: flex;
      flex-direction: column;
      margin: 0;
      width: 256px;
      box-shadow: $shadow-far;
      position: absolute;
      max-height: 85%;
      overflow: hidden;
      z-index: 10;
    }

    &#{$this}__panel--margin-top {
      margin-top: 8px;
    }

    &__body#{$this}__panel__body--open {
      width: 100%;
      height: 100%;
      overflow-y: auto;
      scroll-behavior: smooth;
    }

    &__container {
      overflow-x: hidden;
      height: 100%;
    }

    &__list {
      list-style-type: none;
      margin: 0;
      padding: 0;
    }

    &__section {
      border-bottom: 1px solid $color-gray-120;
      padding: 8px;
      width: 100%;

      &--last {
        border: none;
      }
    }

    &__textinput {
      padding: 8px 8px 0 8px;
    }

    #{$this}__panel__footer {
      width: 100%;
      border-bottom-left-radius: 4px;
      border-bottom-right-radius: 4px;
      padding: 0;
      background: $color-white;
      box-shadow: 0 -2px 0 0 rgba(0, 0, 20, 0.04);

      &--is-button {
        padding: 8px;
        display: flex;
        justify-content: center;
      }
    }
  }
}