// ==========================================================================
// OBJECTS | Dropdown
// ==========================================================================

.dropdown {
  position: relative;

  &__label {
    padding: 10px 50px 10px 10px;
  }

  &__options {
    border: solid 1px $grey-400;
    border-top: 0;
  }

  &__option {
    padding: 10px;
    cursor: pointer;

    dd:last-child {
      margin-bottom: 0;
    }

    &:hover,
    &:focus {
      background-color: rgba( $main-color, 0.2 ) !important;

      dd {
        border-bottom-color: $main-color;
      }
    }

    &:nth-child(even) {
      background-color: $white-800;
    }
  }
}

.dropdown-toggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 40px;
  border: solid 1px $grey-200;
  background-color: transparent;
  text-indent: -9999px;

  &:hover,
  &:focus {
    border-color: $grey-600;

    &:before {
      border-color: $grey-600;
    }

    &:after {
      border-top-color: $grey-600;
    }
  }

  &.open {
    border-color: $grey-400;

    &:before {
      border-color: $grey-400;
    }

    &:after {
      border-top-color: $grey-400;
    }
  }

  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
  }

  &:before {
    border-left: solid 1px $grey-200;
    width: 40px;
    height: 100%;
  }

  &:after {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 5px 0 5px;
    border-color: $grey-400 transparent transparent transparent;
    right: 15px;
    top: 50%;
    margin-top: -4px;
  }
}