@layer odd.reset, odd.tokens, odd.base, odd.layout, odd.components, odd.utilities;

@layer odd.components {
  .odd-button {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    min-block-size: max(
      var(--odd-button-height, var(--odd-control-height-md)),
      var(--odd-target-min)
    );
    margin: 0;
    padding-block: var(--odd-space-none);
    padding-inline: var(--odd-button-padding-inline, var(--odd-control-padding-inline-md));
    gap: var(--odd-control-gap);
    border: var(--odd-border-width-default) solid
      var(--odd-button-border-color, var(--odd-color-border-strong));
    border-radius: var(--odd-button-radius, var(--odd-control-radius));
    background: var(--odd-button-background, var(--odd-color-surface-default));
    color: var(--odd-button-color, var(--odd-color-text-primary));
    font: inherit;
    font-family: var(--odd-type-ui-family);
    font-size: var(--odd-type-ui-size);
    font-weight: var(--odd-type-ui-weight);
    line-height: var(--odd-type-ui-line-height);
    letter-spacing: var(--odd-type-ui-letter-spacing);
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    transition-property: background-color, border-color, color;
    transition-duration: var(--odd-motion-duration-fast);
    transition-timing-function: var(--odd-motion-easing-standard);
  }
  .odd-button[data-size='sm'] {
    min-block-size: max(
      var(--odd-button-height, var(--odd-control-height-sm)),
      var(--odd-target-min)
    );
    padding-inline: var(--odd-button-padding-inline, var(--odd-control-padding-inline-sm));
  }
  .odd-button[data-size='lg'] {
    min-block-size: max(
      var(--odd-button-height, var(--odd-control-height-lg)),
      var(--odd-target-min)
    );
    padding-inline: var(--odd-button-padding-inline, var(--odd-control-padding-inline-lg));
    font-size: var(--odd-type-body-size);
  }
  .odd-button[data-full-width] {
    inline-size: 100%;
  }
  .odd-button[data-appearance='primary'] {
    border-color: var(--odd-button-border-color, transparent);
    background: var(--odd-button-background, var(--odd-color-action-default));
    color: var(--odd-button-color, var(--odd-color-text-on-action));
  }
  .odd-button[data-appearance='ghost'] {
    border-color: var(--odd-button-border-color, transparent);
    background: var(--odd-button-background, transparent);
  }
  @media (hover: hover) {
    .odd-button[data-appearance='primary']:hover:enabled:not([aria-disabled='true']) {
      background: var(--odd-button-background, var(--odd-color-action-hover));
    }
    .odd-button:not([data-appearance='primary']):hover:enabled:not([aria-disabled='true']) {
      background: var(--odd-button-background, var(--odd-color-surface-hover));
    }
  }
  .odd-button[data-appearance='primary']:active:enabled:not([aria-disabled='true']) {
    background: var(--odd-button-background, var(--odd-color-action-pressed));
  }
  .odd-button:not([data-appearance='primary']):active:enabled:not([aria-disabled='true']) {
    background: var(--odd-button-background, var(--odd-color-surface-sunken));
  }
  .odd-button:disabled {
    opacity: 0.5;
  }
  .odd-button:disabled,
  .odd-button[aria-disabled='true'] {
    cursor: not-allowed;
  }
  /* The pressed state twice: as specific as the hover and active rules, and later. */
  .odd-button[aria-pressed='true'][aria-pressed='true']:enabled:not([aria-disabled='true']),
  .odd-button[aria-pressed='true']:disabled {
    border-color: transparent;
    background: var(--odd-color-selection-background);
    color: var(--odd-color-selection-foreground);
  }
  .odd-button:focus-visible {
    outline: var(--odd-focus-width) solid var(--odd-color-focus-ring);
    outline-offset: var(--odd-focus-offset);
  }
  @media (forced-colors: active) {
    .odd-button {
      border: 1px solid ButtonText;
    }
    .odd-button:disabled {
      opacity: 1;
      color: GrayText;
      border-color: GrayText;
    }
    .odd-button[aria-pressed='true'][aria-pressed='true']:enabled:not([aria-disabled='true']) {
      border-color: Highlight;
      background: Highlight;
      color: HighlightText;
    }
  }
}