/*
 * Button component styles.
 * Based on Material Design 3 button specifications.
 * Uses BEM naming convention.
 */
@layer components {
  /* Base button */
  .btn {
    --btn-height: var(--btn-size, 2.5em);
    --btn-padding-inline: 1.5em;
    --btn-gap: 0.5em;
    --btn-radius: 1.25em;
    --btn-font-weight: 500;
    --btn-transition: background-color 150ms var(--ease-out-expo),
                      box-shadow 150ms var(--ease-out-expo),
                      border-color 150ms var(--ease-out-expo),
                      opacity 150ms var(--ease-out-expo);

    align-items: center;
    border: none;
    border-radius: var(--btn-radius);
    cursor: pointer;
    display: inline-flex;
    font-family: inherit;
    font-size: var(--text-small);
    font-weight: var(--btn-font-weight);
    gap: var(--btn-gap);
    justify-content: center;
    line-height: 1;
    min-block-size: var(--btn-height);
    padding-block: 0.625em;
    padding-inline: var(--btn-padding-inline);
    position: relative;
    text-decoration: none;
    transition: var(--btn-transition);
    user-select: none;
    white-space: nowrap;

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-ring-offset);
    }

    &:disabled,
    &[aria-disabled="true"] {
      cursor: not-allowed;
      opacity: 0.38;
      pointer-events: none;
    }
  }

  /* Icon element */
  .btn__icon {
    block-size: 1.125em;
    flex-shrink: 0;
    inline-size: 1.125em;

    & svg {
      block-size: 100%;
      inline-size: 100%;
    }
  }

  .btn__icon--leading {
    margin-inline-start: -0.25em;
  }

  .btn__icon--trailing {
    margin-inline-end: -0.25em;
  }

  /*
   * Filled button (high emphasis)
   * Primary actions, FABs
   */
  .btn--filled {
    background-color: var(--color-accent);
    color: var(--color-white);

    &:hover {
      filter: brightness(0.9);
    }

    &:active {
      filter: brightness(0.8);
    }
  }

  .btn--filled-negative {
    background-color: oklch(var(--lch-red-dark));
    color: var(--color-white);

    &:hover {
      background-color: oklch(var(--lch-red-darker));
    }

    &:active {
      background-color: oklch(var(--lch-red-darkest));
    }
  }

  .btn--filled-positive {
    background-color: oklch(var(--lch-green-dark));
    color: var(--color-white);

    &:hover {
      background-color: oklch(var(--lch-green-darker));
    }

    &:active {
      background-color: oklch(var(--lch-green-darkest));
    }
  }

  /*
   * Tonal button (medium emphasis)
   * Secondary actions that need more emphasis than outlined
   */
  .btn--tonal {
    background-color: oklch(var(--lch-blue-lighter));
    color: oklch(var(--lch-blue-darkest));

    &:hover {
      background-color: oklch(var(--lch-blue-light));
    }

    &:active {
      background-color: oklch(var(--lch-blue-medium) / 0.4);
    }
  }

  .btn--tonal-negative {
    background-color: oklch(var(--lch-red-lighter));
    color: oklch(var(--lch-red-darkest));

    &:hover {
      background-color: oklch(var(--lch-red-light));
    }

    &:active {
      background-color: oklch(var(--lch-red-medium) / 0.4);
    }
  }

  .btn--tonal-neutral {
    background-color: var(--color-ink-lighter);
    color: var(--color-ink-darkest);

    &:hover {
      background-color: var(--color-ink-light);
    }

    &:active {
      background-color: var(--color-ink-medium);
      color: var(--color-ink-inverted);
    }
  }

  /*
   * Elevated button (medium emphasis)
   * Actions that need separation from background
   */
  .btn--elevated {
    background-color: var(--color-canvas);
    box-shadow: var(--shadow);
    color: oklch(var(--lch-blue-dark));

    &:hover {
      background-color: oklch(var(--lch-blue-lightest));
    }

    &:active {
      background-color: oklch(var(--lch-blue-lighter));
    }
  }

  /*
   * Outlined button (medium emphasis)
   * Secondary actions, alternative to filled
   */
  .btn--outlined {
    background-color: transparent;
    border: 1px solid var(--color-accent);
    color: var(--color-accent);

    &:hover {
      background-color: var(--color-accent-surface);
    }

    &:active {
      filter: brightness(0.95);
    }
  }

  .btn--outlined-neutral {
    background-color: transparent;
    border: 1px solid var(--color-ink-light);
    color: var(--color-ink);

    &:hover {
      background-color: var(--color-ink-lightest);
      border-color: var(--color-ink-medium);
    }

    &:active {
      background-color: var(--color-ink-lighter);
    }
  }

  .btn--outlined-negative {
    background-color: transparent;
    border: 1px solid oklch(var(--lch-red-light));
    color: oklch(var(--lch-red-dark));

    &:hover {
      background-color: oklch(var(--lch-red-lightest));
      border-color: oklch(var(--lch-red-medium));
    }

    &:active {
      background-color: oklch(var(--lch-red-lighter));
    }
  }

  .btn--outlined-light {
    background-color: transparent;
    border: 1px solid var(--color-ink-light);
    color: var(--color-ink-lightest);

    &:hover {
      background-color: oklch(var(--lch-white) / 0.1);
      border-color: var(--color-ink-lightest);
      color: var(--color-white);
    }

    &:active {
      background-color: oklch(var(--lch-white) / 0.15);
    }
  }

  /*
   * Text button (low emphasis)
   * Tertiary actions, less prominent
   */
  .btn--text {
    --btn-padding-inline: 0.75em;

    background-color: transparent;
    color: var(--color-accent);

    &:hover {
      background-color: var(--color-accent-surface);
    }

    &:active {
      filter: brightness(0.95);
    }
  }

  .btn--text-neutral {
    --btn-padding-inline: 0.75em;

    background-color: transparent;
    color: var(--color-ink);

    &:hover {
      background-color: var(--color-ink-lightest);
    }

    &:active {
      background-color: var(--color-ink-lighter);
    }
  }

  .btn--text-negative {
    --btn-padding-inline: 0.75em;

    background-color: transparent;
    color: oklch(var(--lch-red-dark));

    &:hover {
      background-color: oklch(var(--lch-red-lightest));
    }

    &:active {
      background-color: oklch(var(--lch-red-lighter));
    }
  }

  /*
   * Icon-only button
   * For buttons with just an icon, no text
   */
  .btn--icon-only {
    --btn-padding-inline: 0;

    aspect-ratio: 1;
    border-radius: 50%;
    inline-size: var(--btn-height);
    min-block-size: var(--btn-height);
    padding: 0;

    & .btn__icon {
      margin: 0;
    }
  }

  /*
   * Size modifiers
   */
  .btn--small {
    --btn-height: 2em;
    --btn-padding-inline: 1em;
    --btn-gap: 0.375em;

    font-size: var(--text-x-small);
  }

  .btn--large {
    --btn-height: 3em;
    --btn-padding-inline: 2em;
    --btn-gap: 0.625em;

    font-size: var(--text-normal);
  }

  /*
   * Full-width modifier
   */
  .btn--full-width {
    inline-size: 100%;
  }

  /*
   * Button group
   * For grouping related buttons together
   */
  .btn-group {
    display: inline-flex;
    gap: 0;

    & .btn {
      border-radius: 0;

      &:first-child {
        border-end-start-radius: var(--btn-radius);
        border-start-start-radius: var(--btn-radius);
      }

      &:last-child {
        border-end-end-radius: var(--btn-radius);
        border-start-end-radius: var(--btn-radius);
      }
    }

    & .btn--outlined + .btn--outlined {
      margin-inline-start: -1px;
    }
  }

  /*
   * Chip component
   * Small labels for tags, status, categories
   */
  .chip {
    align-items: center;
    background-color: var(--color-ink-lighter);
    border-radius: 1em;
    color: var(--color-ink-darker);
    display: inline-flex;
    font-size: var(--text-x-small);
    font-weight: 500;
    gap: 0.25em;
    line-height: 1;
    padding: 0.25em 0.75em;
    white-space: nowrap;
  }

  .chip--small {
    font-size: var(--text-xx-small);
    padding: 0.2em 0.5em;
  }

  .chip--accent {
    background-color: var(--color-accent-surface);
    color: var(--color-accent);
  }

  .chip--positive {
    background-color: oklch(var(--lch-green-lighter));
    color: oklch(var(--lch-green-darker));
  }

  .chip--negative {
    background-color: oklch(var(--lch-red-lighter));
    color: oklch(var(--lch-red-darker));
  }
}