/**
 * @file
 * Styles for the Theme Toggle component.
 */

@layer components {
  .theme-toggle {
    /* Layout */
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;

    /* Visual */
    border-radius: 0.5rem;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-fg);

    /* Typography */
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1;
    font-weight: 500;

    /* Interaction */
    cursor: pointer;
    transition: all 0.2s ease;
  }

  .theme-toggle:hover {
    background: var(--color-elevated);
    border-color: var(--color-border-dark);
  }

  .theme-toggle:focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 2px;
  }

  .theme-toggle:active {
    transform: scale(0.98);
  }

  .theme-toggle__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
  }

  .theme-toggle__icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
  }

  .theme-toggle__label {
    user-select: none;
  }

  /* Optional: Hide label on very small screens */
  @media (max-width: 360px) {
    .theme-toggle__label {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border-width: 0;
    }
  }

  /* Pressed state indication */
  .theme-toggle[aria-pressed="true"] {
    background: var(--color-elevated);
  }
}