@layer components {
  .button {
    &[data-type="primary"], &[data-type="primary-light"], &[data-type="secondary"], &[data-type="secondary-light"], &[data-type="warning"] {
      border-width: var(--button-border-width);
      border-style: solid;

      &:where(:not([data-size]), [data-size="small"]) {
        line-height: 1.1rem;
      }

      &:where(:not([data-size])) {
        padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
      }
      &[data-size="small"] {
        padding: 0.7rem calc(var(--spacing) * 6);
      }
      &[data-size="medium"] {
        padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 7);
      }
      &[data-size="large"] {
        padding: calc(var(--spacing) * 3.5) calc(var(--spacing) * 7);
      }
    }

    &[data-type="primary"] {
      background-color: var(--color-button-primary);
      border-color: var(--color-button-primary);
      color: var(--color-content-on-dark);

      &:hover {
        background-color: var(--color-surface-dark-high);
        border-color: var(--color-surface-dark-high);
      }

      &:disabled {
        background-color: var(--color-button-primary-disabled);
        border-color: var(--color-button-primary-disabled);
        color: var(--color-button-primary-disabled-text);
      }
    }

    &[data-type="primary-light"] {
      background-color: var(--color-surface-light);
      border-color: var(--color-surface-light);
      color: var(--color-brand-primary);

      &:hover {
        background-color: var(--color-surface-light-high);
        border-color: var(--color-surface-light-high);
      }

      &:disabled {
        background-color: var(--color-button-primary-disabled);
        border-color: var(--color-button-primary-disabled);
      }
    }

    &[data-type="secondary"] {
      border-color: var(--color-brand-primary);
      color: var(--color-brand-primary);

      &:hover {
        background-color: var(--color-surface-light-high);
        color: var(--color-brand-primary);
      }

      &:disabled {
        background-color: var(--color-button-primary-disabled);
        border-color: var(--color-button-primary-disabled);
      }
    }

    &[data-type="secondary-light"] {
      border-color: var(--color-surface-light);
      color: var(--color-content-on-dark);

      &:hover {
        background-color: var(--color-surface-light-high);
        color: var(--color-brand-primary);
      }

      &:disabled {
        background-color: var(--color-button-primary-disabled);
        border-color: var(--color-button-primary-disabled);
      }
    }
  }
}