@import '../dao-color.scss';

@mixin hoverColor($color) {
  color: $white;
  background-color: $color;
  svg {
    fill: $white;
  }
}

@mixin textColor($color) {
  color: $color;
}

.dao-dropdown-item {
  &.dao-dropdown-item-base {
    font-size: 14px;
    line-height: 16px;

    height: 30px;
    padding: 7px 10px;

    cursor: pointer;
    svg {
      width: 16px;
      height: 16px;

      vertical-align: middle;
    }
    @each $key, $value in
      ('blue', $blue),
      ('green', $green),
      ('yellow', $yellow),
      ('orange', $orange),
      ('red', $red),
      ('purple', $purple),
      ('black', $black-dark) {
      &.dao-dropdown-item-#{$key} {
        color: $value;
        svg {
          fill: $value;
        }
      }
      &.dao-dropdown-item-hover-#{$key}:hover {
        @include hoverColor($value)
      }
    }
  }
  &.dao-dropdown-item-disabled {
    font-size: 14px;
    line-height: 16px;

    height: 30px;
    padding: 7px 10px;

    cursor: not-allowed;

    color: $grey-light;
    svg {
      width: 16px;
      height: 16px;

      vertical-align: middle;

      fill: $grey-light;
    }
  }
  &.dao-dropdown-item-subtitle {
    font-size: 12px;
    line-height: 20px;

    height: 21px;
    padding: 0 10px;

    color: $grey-dark;
    border-top: 1px solid $white-dark;
    background-color: $white-light;
  }
  &.dao-dropdown-item-divided {
    height: 1px;
    margin: 5px 0;

    background-color: $white-dark;
  }
}
