.dropdown {
  label {
    margin-bottom: 0.625rem;
    font-size: 0.875rem;
    font-weight: $font-weight-normal;
    color: $black;
    line-height: 1;
    .dark & {
      color: $gray-100;
    }
  }
  &-toggle {
    width: 100%;
    height: calc(2em + 1.25rem);
    padding: 0.625rem 1.25rem;
    line-height: 2;
    font-size: 1rem;
    font-weight: $font-weight-light;
    background-color: $gray-200;
    border-color: $gray-200;
    color: $black;
    display: inline-block;
    .dark & {
      background-color: $gray-900;
      border-color: $gray-900;
      color: $white;
    }
    &:hover, &:focus {
      outline: none;
      text-decoration: none;
      color: $accent;
    }
    &:after {
      display: inline-block;
      float: right;
      margin-top: .75rem;
      margin-left: 0;
      vertical-align: 0;
      content: "";
      border-top: .675em solid;
      border-right: .375rem solid transparent;
      border-bottom: 0;
      border-left: .375rem solid transparent;
    }

  }
  &-menu {
    width: 100%;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    color: $white;
    text-align: left;
    list-style: none;
    background-color: $black;
    background-clip: padding-box;
    border: 0;
    .dark & {
      background-color: $white;
    }
  }
  &-item {
    padding: 0.625rem 1.25rem;
    font-weight: $font-weight-light;
    line-height: 2;
    color: $white;
    border: 0;
    .dark & {
      color: $gray-900;
      &:hover {
        background: $secondary;
        color: $white;
      }
      &:active, &.active {
        color: $black;
        background: $gray-200;
      }
    }
    &:hover {
      background: $secondary;
      color: $white;
    }
    &:active, &.active {
      color: $white;
      background: $primary;
    }
  }
}

.custom-select {
  option {
    &[selected] {
      background-color: $black;
    }
  }
}