@layer porchlight {
  @layer reset, tokens, themes, base, layout, components, utilities, enhancements, print;
}

@layer porchlight.components {
  @scope (.pl-c-button) {
    :scope {
      --pl-c-button-bg: var(--pl-color-surface);
      --pl-c-button-fg: var(--pl-color-text);
      --pl-c-button-border: var(--pl-color-border);
      --pl-c-button-highlight: transparent;
      justify-content: center;
      align-items: center;
      gap: var(--pl-control-gap);
      min-block-size: var(--pl-control-block-size);
      min-inline-size: var(--pl-control-block-size);
      padding-inline: var(--pl-control-padding-inline);
      border: var(--pl-control-border-width) solid var(--pl-c-button-border);
      border-radius: var(--pl-control-radius);
      background: var(--pl-c-button-bg);
      color: var(--pl-c-button-fg);
      font-family: inherit;
      font-weight: var(--pl-font-weight-semibold);
      text-align: center;
      white-space: nowrap;
      cursor: default;
      user-select: none;
      box-shadow: inset 0 1px 0 var(--pl-c-button-highlight);
      transition: background-color var(--pl-duration-1) var(--pl-ease-standard),
        border-color var(--pl-duration-1) var(--pl-ease-standard),
        color var(--pl-duration-1) var(--pl-ease-standard),
        transform var(--pl-duration-1) var(--pl-ease-spring),
        box-shadow var(--pl-duration-1) var(--pl-ease-standard);
      line-height: 1;
      text-decoration: none;
      display: inline-flex;
      position: relative;
    }

    :scope[data-variant="primary"] {
      --pl-c-button-bg: var(--pl-color-accent);
      --pl-c-button-fg: var(--pl-color-accent-text);
      --pl-c-button-border: var(--pl-color-accent);
      --pl-c-button-highlight: oklch(100% 0 0 / .14);
    }

    :scope[data-variant="secondary"] {
      --pl-c-button-bg: var(--pl-color-surface-2);
    }

    :scope[data-variant="ghost"] {
      --pl-c-button-bg: transparent;
      --pl-c-button-border: transparent;
    }

    :scope:not([data-variant]) {
      --pl-c-button-border: color-mix(in oklab,
        var(--pl-color-border),
        transparent 20%);
    }

    :scope[data-icon-only] {
      inline-size: var(--pl-control-block-size);
      padding-inline: 0;
    }

    :scope[data-icon-only] > :is(svg, img) {
      flex: none;
      block-size: 1em;
      inline-size: 1em;
    }

    :scope:is(:hover, [data-hover]):not(:disabled, [aria-disabled="true"]) {
      background-color: color-mix(in oklab,
        var(--pl-c-button-bg),
        var(--pl-color-text) 12%);
      cursor: pointer;
    }

    :scope[data-variant="ghost"]:is(:hover, [data-hover]):not(:disabled, [aria-disabled="true"]) {
      background-color: color-mix(in oklab,
        var(--pl-color-accent),
        transparent 85%);
    }

    :scope:is(:active, [aria-pressed="true"]):not(:disabled, [aria-disabled="true"]) {
      transform: scale(.97);
    }

    :scope[data-variant="primary"]:focus-visible {
      box-shadow: var(--pl-shadow-glow),
        inset 0 1px 0 var(--pl-c-button-highlight);
      outline: 2px solid #0000;
    }

    :scope:is([data-variant="ghost"], [data-variant="secondary"])[aria-pressed="true"] {
      --pl-c-button-bg: color-mix(in oklab,
        var(--pl-color-accent),
        transparent 82%);
      --pl-c-button-fg: var(--pl-color-text);
    }

    :scope:is(:disabled, [aria-disabled="true"]) {
      opacity: var(--pl-opacity-disabled);
      cursor: not-allowed;
      box-shadow: none;
    }

    :scope[aria-busy="true"] > .pl-c-button__label {
      opacity: 0;
    }

    :scope[aria-busy="true"] > .pl-c-spinner {
      --pl-c-inline-loading-color: currentColor;
      position: absolute;
      inset: 50% auto auto 50%;
      translate: -50% -50%;
    }

    @supports (text-box: trim-both cap alphabetic) {
      :scope {
        text-box: trim-both cap alphabetic;
      }
    }

    @media (forced-colors: active) {
      :scope {
        border-color: buttonborder;
      }

      :scope[data-variant="primary"] {
        color: highlighttext;
        background: highlight;
        border-color: highlight;
      }
    }
  }
}