@layer utility {
  .variant--filled-disabled {
    color: var(--disabled-fg);
    background-color: var(--disabled-bg);
    border-color: var(--disabled-border-color);
    filter: grayscale(100%);

    &:hover {
      color: var(--disabled-fg);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
      filter: grayscale(100%);
    }

    &:active {
      color: var(--disabled-fg);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
      filter: grayscale(100%);
    }

    &:focus-visible {
      color: var(--disabled-fg);
      background-color: var(--disabled-bg);
      border-color: var(--disabled-border-color);
      filter: grayscale(100%);
    }
  }

  .variant--outline-disabled {
    color: var(--disabled-fg);
    background-color: var(--disabled-bg);
    border: solid 1px;
    border-color: var(--disabled-border-color);
    filter: grayscale(100%);

    &:hover {
      color: var(--disabled-fg);
      background-color: var(--disabled-bg);
      border: solid 1px;
      border-color: var(--disabled-border-color);
      filter: grayscale(100%);
    }

    &:active {
      color: var(--disabled-fg);
      background-color: var(--disabled-bg);
      border: solid 1px;
      border-color: var(--disabled-border-color);
      filter: grayscale(100%);
    }

    &:focus-visible {
      color: var(--disabled-fg);
      background-color: var(--disabled-bg);
      border: solid 1px;
      border-color: var(--disabled-border-color);
      filter: grayscale(100%);
    }
  }

  .variant--ghost-disabled {
    color: var(--ghost-fg);
    background-color: var(--ghost-bg);
    border-color: var(--ghost-border-color);
    filter: grayscale(50%);

    &:hover {
      color: var(--ghost-fg);
      background-color: var(--ghost-bg);
      border-color: var(--ghost-border-color);
      filter: grayscale(50%);
    }

    &:active {
      color: var(--ghost-fg);
      background-color: var(--ghost-bg);
      border-color: var(--ghost-border-color);
      filter: grayscale(50%);
    }

    &:focus-visible {
      color: var(--ghost-fg);
      background-color: var(--ghost-bg);
      border-color: var(--ghost-border-color);
      filter: grayscale(50%);
    }
  }
}