@defaul-colors:
{
    red: #F64E60;
    yellow: #FFA800;
    blue: #3996FF;
    gray: #8F9EAE;
    black: #2C2C2C;
}

@hover-colors:
{
    red: #DA4151;
    yellow: #CE8903;
    blue: #3A76BA;
    gray: #3996FF;
    black: #3996FF;
}

each(@defaul-colors, {
  .color-@{key},
  .color-@{key}::before,
  .color-@{key}::after,
  .color-@{key} * {
    color: @value;
    border-color: @value;
  }

  .color-@{key} svg [fill] {
    fill:  @value;
  }

  .color-@{key} svg [stroke] {
    stroke: @value;
  }

  button.color-@{key} {
    background: @value;
  }
});

each(@hover-colors, {
  .hoverable:hover .color-@{key},
  [active="true"] .color-@{key},
  [active]:not([active="false"]) .color-@{key},
  .color-@{key}[active="true"],
  .color-@{key}[active="true"]::before,
  .color-@{key}[active="true"]::after,
  .color-@{key}[active="true"] *,
  .color-@{key}[active]:not([active="false"]),
  .color-@{key}[active]:not([active="false"])::before,
  .color-@{key}[active]:not([active="false"])::after,
  .color-@{key}[active]:not([active="false"]) *,
  .color-@{key}.hoverable:hover,
  .color-@{key}.hoverable:hover::before,
  .color-@{key}.hoverable:hover::after,
  .color-@{key}.hoverable:hover * {
    color: @value;
    border-color: @value;
  }

  *:not([disabled]){
    &.hoverable:hover .color-@{key} svg [fill],
    &[active="true"] .color-@{key} svg [fill],
    &[active]:not([active="false"]) .color-@{key} svg [fill],
    &.color-@{key}[active]:not([active="false"]) svg [fill],
    &.color-@{key}[active="true"] svg [fill],
    &.color-@{key}.hoverable:hover svg [fill] {
      fill: @value;
    }
  
    &.hoverable:hover .color-@{key} svg [stroke],
    &[active="true"] .color-@{key} svg [stroke],
    &.color-@{key}[active="true"] svg [stroke],
    &[active] .color-@{key} svg [stroke],
    &.color-@{key}[active]:not([active="false"]) svg [stroke],
    &.color-@{key}.hoverable:hover svg [stroke] {
      stroke: @value;
    }
  
    &button.color-@{key}:not([disabled]):hover {
      background: @value;
    }

  }
});

.hoverable[disabled] {
    opacity: 0.7;
}