@import '../mixins';

.dropdown-menu{
  //FIXME: Add correct rem
  padding: $spacing-element-8 2.5rem;
  border: 1px solid get-colour(grey-300);
  //FIXME: Add correct rem
  font-size: 3.5rem;
  border-radius: $border-radius;
}

.dropdown-item {
  color: get-colour(grey-600);
  //FIXME: Add correct rem
  padding: $spacing-element-4 $spacing-element-2;
  text-decoration: none;

  &:focus,
  &:hover,
  &:active,
  &.active {
    color: get-colour(grey-800);
    background-color: get-colour(white);
  }

  &:active, //TODO: Look into active state, based on 3.5.x
  &.active {
    background-color: get-colour(grey-500);
  }
}

.dropdown-toggle-split {
  //FIXME: Add correct rem
  padding-right: 5.625px;
  padding-left: 5.625px;

 .btn-lg + & {
    //FIXME: Add correct rem
    padding-right: 1.875rem;
    padding-left: 1.875rem;
 }

 .btn-sm + & {
    //FIXME: Add correct rem
    padding-right: 3.75px;
    padding-left: 3.75px;
  }
}

// Override the .show for buttons
.show {
  @each $type in $interaction-types {
    > .btn-#{$type}.dropdown-toggle {
      @extend .btn-#{$type};
      color: get-colour(white);
    }
  }
  @each $type in $interaction-types2 {
    > .btn-#{$type}.dropdown-toggle {
      @extend .btn-#{$type};
    }
  }
  @each $type in $interaction-types3 {
    > .btn-#{$type}.dropdown-toggle {
      @extend .btn-#{$type};
    }
  }
}