@use "./../variables" as *;
@use "./../mixins/colors" as *;

@each $key, $value in $all-colors {
  .color--#{$key} {
    @include make-color($key);

    color: var(--color) !important;
  }

  button.color--#{$key},
  a.color--#{$key} {
    @include make-color($key);

    color: var(--color) !important;

    &:hover,
    &:focus {
      color: var(--color-hover) !important;
    }

    &:disabled,
    &.disabled {
      color: var(--color-disabled) !important;
    }
  }

  .background--#{$key} {
    @include make-background-color($key);

    background-color: var(--background-color) !important;
  }

  .border--#{$key} {
    @include make-border-color($key);

    border-color: var(--border-color) !important;
  }
}

@each $key, $value in $grays {
  .color--#{$key} {
    @include make-color($key);

    color: var(--color) !important;
  }

  button.color--#{$key},
  a.color--#{$key} {
    @include make-color($key);

    color: var(--color) !important;

    &:hover,
    &:focus {
      color: var(--color-hover) !important;
    }

    &:disabled,
    &.disabled {
      color: var(--color-disabled) !important;
    }
  }

  .background--#{$key} {
    @include make-background-color($key);

    background-color: var(--background-color) !important;
  }

  .border--#{$key} {
    @include make-border-color($key);

    border-color: var(--border-color) !important;
  }
}