@each $name, $colors in $component-colors {
  .el-button.#{$name} {
    border-color: map-get($colors, base);
    color: map-get($colors, base);
    background: lighten(map-get($colors, base), 40%);

    &:hover,
    &:active,
    &:active:hover,
    &:active:focus,
    &:focus,
    &.active {
      border-color: map-get($colors, base);
      color: map-get($colors, font);
      background-color: map-get($colors, base);
    }

    &[disabled="disabled"] {
      background-color: rgba(gray, 0.6) !important;
      border-color: transparent !important;
      color: #fff !important;
    }
  }

  .bg-#{$name} {
    background: map-get($colors, base) !important;
  }
  .bg-#{$name}-opacity {
    background: rgba(map-get($colors, base), 0.8) !important;
  }
  .bg-hover-#{$name}:hover {
    background: map-get($colors, base) !important;
  }
  .font-#{$name} {
    color: map-get($colors, base) !important;
  }
  .bg-font-#{$name} {
    color: map-get($colors, font) !important;
  }
  .border-#{$name} {
    border-color: map-get($colors, base) !important;
  }
  .border-top-#{$name} {
    border-top-color: map-get($colors, base) !important;
  }
  .border-bottom-#{$name} {
    border-bottom-color: map-get($colors, base) !important;
  }
  .border-left-#{$name} {
    border-left-color: map-get($colors, base) !important;
  }
  .border-right-#{$name} {
    border-right-color: map-get($colors, base) !important;
  }
  //  pseudo classes
  .bg-before-#{$name}:before,
  .bg-after-#{$name}:after {
    background: map-get($colors, base) !important;
  }
  .border-before-#{$name}:before,
  .border-after-#{$name}:after {
    border-color: map-get($colors, base) !important;
  }
  .border-top-before-#{$name}:before,
  .border-top-after-#{$name}:after {
    border-top-color: map-get($colors, base) !important;
  }
  .border-bottom-before-#{$name}:before,
  .border-bottom-after-#{$name}:after {
    border-bottom-color: map-get($colors, base) !important;
  }
  .border-left-before-#{$name}:before,
  .border-left-after-#{$name}:after {
    border-left-color: map-get($colors, base) !important;
  }
  .border-right-before-#{$name}:before,
  .border-right-after-#{$name}:after {
    border-right-color: map-get($colors, base) !important;
  }
}
