@layer base {
  :where(a, a:hover, a:visited) {
    text-decoration: none;
    color: var(--color-typo-dark);
  }

  .center {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .spacer {
    flex: 1 1;
  }

  .workspace {
    height: 100%;
    width: 100%;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    gap: var(--spacing-m);
    padding: var(--spacing-m) var(--spacing-xl);
    header {
      display: flex;
      flex-direction: column;
      gap: var(--spacing-xs);
      line-height: 1.3em;
      h3 {
        font-size: var(--font-size-xl);
      }
      p {
        font-size: var(--font-size-xs);
        color: var(--color-neutral-focus);
      }
    }
  }

  /* 按钮默认样式 */
  :where(button, .button) {
    --button-neutral-bg: var(--color-neutral);
    border: none;
    border-radius: var(--border-radius-xxs);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    font-size: var(--font-size-s);
    line-height: 1.5em;
    color: var(--color-fg);
    background-color: var(--button-neutral-bg);
    &:hover:not([disabled]) {
      background-color: oklch(from var(--button-neutral-bg) calc(l + (1 - l) * 0.2) c h);
    }
    &:active:not([disabled]) {
      background-color: oklch(from var(--button-neutral-bg) calc(l * 0.9) c h);
    }
    &[disabled] {
      cursor: not-allowed;
      color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
      background-color: oklch(from var(--button-neutral-bg) calc(l * 0.8) calc(c * 0.1) h);
    }
    &.small {
      font-size: var(--font-size-xs);
    }
    &.large {
      font-size: var(--font-size-m);
    }
    &.larger {
      font-size: var(--font-size-l);
    }
    &.primary {
      color: var(--color-fg);
      background-color: var(--color-primary);
      &:hover:not([disabled]) {
        background-color: var(--color-primary-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-primary-active);
      }
      &[disabled] {
        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
        background-color: var(--color-primary-disabled);
      }
    }
    &.secondary {
      color: var(--color-fg);
      background-color: var(--color-secondary);
      &:hover:not([disabled]) {
        background-color: var(--color-secondary-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-secondary-active);
      }
      &[disabled] {
        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
        background-color: var(--color-secondary-disabled);
      }
    }
    &.accent {
      color: var(--color-fg);
      background-color: var(--color-accent);
      &:hover:not([disabled]) {
        background-color: var(--color-accent-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-accent-active);
      }
      &[disabled] {
        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
        background-color: var(--color-accent-disabled);
      }
    }
    &.danger {
      color: var(--color-fg);
      background-color: var(--color-danger);
      &:hover:not([disabled]) {
        background-color: var(--color-danger-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-danger-active);
      }
      &[disabled] {
        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
        background-color: var(--color-danger-disabled);
      }
    }
    &.warn {
      color: var(--color-fg);
      background-color: var(--color-warn);
      &:hover:not([disabled]) {
        background-color: var(--color-warn-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-warn-active);
      }
      &[disabled] {
        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
        background-color: var(--color-warn-disabled);
      }
    }
    &.success {
      color: var(--color-fg);
      background-color: var(--color-success);
      &:hover:not([disabled]) {
        background-color: var(--color-success-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-success-active);
      }
      &[disabled] {
        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
        background-color: var(--color-success-disabled);
      }
    }
    &.info {
      color: var(--color-fg);
      background-color: var(--color-info);
      &:hover:not([disabled]) {
        background-color: var(--color-info-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-info-active);
      }
      &[disabled] {
        color: oklch(from var(--color-fg) calc(l * 0.5) calc(c * 0.3) h);
        background-color: var(--color-info-disabled);
      }
    }
  }

  /* 输入框以及输入框组合体默认样式 */
  :where(input, textarea) {
    border: 1px solid oklch(from var(--color-bg) calc(l + (1 - l) * 0.1) c h);
    border-radius: var(--border-radius-xxs);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4);
    background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
    .input_wrapper & {
      padding: 0;
      border: none;
      flex-grow: 1;
    }
    &:focus {
      outline: none;
    }
    &[type='number']::-webkit-outer-spin-button,
    &[type='number']::-webkit-inner-spin-button {
      -webkit-appearance: none;
      margin: 0;
    }
  }
  textarea {
    resize: none;
  }
  .input_wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    border: 1px solid oklch(from var(--color-bg) calc(l + (1 - l) * 0.1) c h);
    padding: calc(var(--spacing) * 2);
    background-color: oklch(from var(--color-bg) calc(l * 0.8) c h);
  }

  /* 仅展示一个图标的ActionIcon */
  :where(.action_icon) {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(var(--spacing) * 2);
    border-radius: var(--border-radius-xxs);
    background-color: transparent;
    cursor: pointer;
    svg {
      width: 1em;
      height: 1em;
      color: var(--color-neutral);
    }
    &:hover:not([disabled]) {
      background-color: var(--color-neutral-hover);
      svg {
        color: var(--color-fg);
      }
    }
    &:active:not([disabled]) {
      background-color: var(--color-neutral-active);
      svg {
        color: var(--color-fg);
      }
    }
    &[disabled] {
      cursor: not-allowed;
      svg {
        color: var(--color-neutral-disabled);
      }
    }
    &.primary {
      svg {
        color: var(--color-primary);
      }
      &:hover:not([disabled]) {
        background-color: var(--color-primary-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-primary-active);
      }
      &[disabled] {
        svg {
          color: var(--color-primary-disabled);
        }
      }
    }
    &.secondary {
      svg {
        color: var(--color-secondary);
      }
      &:hover:not([disabled]) {
        background-color: var(--color-secondary-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-secondary-active);
      }
      &[disabled] {
        svg {
          color: var(--color-secondary-disabled);
        }
      }
    }
    &.accent {
      svg {
        color: var(--color-accent);
      }
      &:hover:not([disabled]) {
        background-color: var(--color-accent-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-accent-active);
      }
      &[disabled] {
        svg {
          color: var(--color-accent-disabled);
        }
      }
    }
    &.danger {
      svg {
        color: var(--color-danger);
      }
      &:hover:not([disabled]) {
        background-color: var(--color-danger-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-danger-active);
      }
      &[disabled] {
        svg {
          color: var(--color-danger-disabled);
        }
      }
    }
    &.warn {
      svg {
        color: var(--color-warn);
      }
      &:hover:not([disabled]) {
        background-color: var(--color-warn-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-warn-active);
      }
      &[disabled] {
        svg {
          color: var(--color-warn-disabled);
        }
      }
    }
    &.success {
      svg {
        color: var(--color-success);
      }
      &:hover:not([disabled]) {
        background-color: var(--color-success-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-success-active);
      }
      &[disabled] {
        svg {
          color: var(--color-success-disabled);
        }
      }
    }
    &.info {
      svg {
        color: var(--color-info);
      }
      &:hover:not([disabled]) {
        background-color: var(--color-info-hover);
      }
      &:active:not([disabled]) {
        background-color: var(--color-info-active);
      }
      &[disabled] {
        svg {
          color: var(--color-info-disabled);
        }
      }
    }
  }

  /* 颜色选择器滑杆 */
  input[type='range'].picker {
    -webkit-appearance: none;
    width: 100%;
    height: 1em;
    background: transparent;
    &::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 1em;
      height: 1em;
      background: oklch(from var(--color-primary) l c h / 70%);
      border-radius: var(--border-radius-xxs);
      cursor: pointer;
    }
    &::-moz-range-thumb {
      width: 1em;
      height: 1em;
      background: oklch(from var(--color-primary) l c h / 70%);
      border-radius: var(--border-radius-xxs);
      cursor: pointer;
    }
    &::-webkit-slider-runnable-track {
      width: 100%;
      height: 1em;
      cursor: pointer;
      background: transparent;
      border-radius: var(--border-radius-xxs);
    }
    &::-moz-range-track {
      width: 100%;
      height: 1em;
      cursor: pointer;
      background: transparent;
      border-radius: var(--border-radius-xxs);
    }
  }

  /* Badge */
  .badge {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-xs) var(--spacing-m);
    border-radius: var(--border-radius-xxs);
    font-size: var(--font-size-m);
    font-weight: bold;
    line-height: 1.2em;
    color: var(--color-fg);
    background-color: var(--color-neutral);
    &.uppercase {
      text-transform: uppercase;
    }
    &.primary {
      background-color: var(--color-primary);
    }
    &.secondary {
      background-color: var(--color-secondary);
    }
    &.accent {
      background-color: var(--color-accent);
    }
    &.danger {
      background-color: var(--color-danger);
    }
    &.warn {
      background-color: var(--color-warn);
    }
    &.success {
      background-color: var(--color-success);
    }
    &.info {
      background-color: var(--color-info);
    }
  }
}