@layer base {
  :root {
    --button-text: var(--color-dark-on-primary);
    --button-surface: var(--color-dark-primary);
    --button-outline: var(--color-dark-outline);
  }

  :where(ul, menu) {
    margin: 0;
    padding: 0;
  }

  :where(a) {
    text-decoration: none;
    color: var(--color-dark-on-surface);

    &:hover {
      color: var(--color-dark-primary);
    }

    &:active {
      color: var(--color-dark-tertiary);
    }
  }

  :is(h1, h2, h3, h4, h5, h6) {
    font-weight: bold;
    line-height: 1.2em;
  }

  h1 {
    font-size: 2.6em;
  }

  h2 {
    font-size: 2em;
  }

  h3 {
    font-size: 1.8em;
  }

  h4 {
    font-size: 1.5em;
  }

  h5 {
    font-size: 1.2em;
  }

  h6 {
    font-size: 1em;
  }

  .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: calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 2);
    &.vertical {
      flex-direction: column;
    }
    &.horizontal {
      flex-direction: row;
    }
  }

  :where(button, .button) {
    border: none;
    border-radius: calc(var(--border-radius) * 2);
    padding: calc(var(--spacing) * 1) calc(var(--spacing) * 3);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: calc(var(--spacing) * 2);
    font-size: calc(var(--font-size) * 1.2);
    line-height: 1.3em;
    color: var(--button-text);
    background-color: var(--button-surface);
    box-shadow: var(--elevation-dark-0);
    cursor: pointer;
    &.smaller {
      font-size: calc(var(--font-size) * 0.8);
    }
    &.small {
      font-size: calc(var(--font-size) * 1);
    }
    &.large {
      font-size: calc(var(--font-size) * 1.4);
    }
    &.larger {
      font-size: calc(var(--font-size) * 1.6);
    }
    &:hover:not(:disabled) {
      --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
      box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
    }
    &:active:not(:disabled) {
      --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
      box-shadow: var(--elevation-dark-0);
    }
    &:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
      cursor: not-allowed;
    }
    &.filled:not(:disabled) {
      --button-text: var(--color-dark-on-primary);
      --button-surface: var(--color-dark-primary);
      &.secondary {
        --button-text: var(--color-dark-on-secondary);
        --button-surface: var(--color-dark-secondary);
      }
      &.tertiary {
        --button-text: var(--color-dark-on-tertiary);
        --button-surface: var(--color-dark-tertiary);
      }
      &.danger {
        --button-text: var(--color-dark-on-error);
        --button-surface: var(--color-dark-error);
      }
      &.warn {
        --button-text: var(--color-dark-on-warning);
        --button-surface: var(--color-dark-warning);
      }
      &.success {
        --button-text: var(--color-dark-on-success);
        --button-surface: var(--color-dark-success);
      }
      &.info {
        --button-text: var(--color-dark-on-info);
        --button-surface: var(--color-dark-info);
      }
      &:hover {
        color: var(--button-surface);
        background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
        box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
      }
      &:active {
        color: var(--button-surface);
        background-color: color-mix(in oklch, var(--button-surface) 18%, transparent);
      }
    }
    &.filled:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
    }
    &.tonal:not(:disabled) {
      --button-text: var(--color-dark-on-primary-container);
      --button-surface: var(--color-dark-primary-container);
      &.secondary {
        --button-text: var(--color-dark-on-secondary-container);
        --button-surface: var(--color-dark-secondary-container);
      }
      &.tertiary {
        --button-text: var(--color-dark-on-tertiary-container);
        --button-surface: var(--color-dark-tertiary-container);
      }
      &.danger {
        --button-text: var(--color-dark-on-error-container);
        --button-surface: var(--color-dark-error-container);
      }
      &.warn {
        --button-text: var(--color-dark-on-warning-container);
        --button-surface: var(--color-dark-warning-container);
      }
      &.success {
        --button-text: var(--color-dark-on-success-container);
        --button-surface: var(--color-dark-success-container);
      }
      &.info {
        --button-text: var(--color-dark-on-info-container);
        --button-surface: var(--color-dark-info-container);
      }
      &:hover {
        color: var(--button-surface);
        background-color: color-mix(in oklch, var(--button-surface) 8%, transparent);
        box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
      }
      &:active {
        color: var(--button-surface);
        background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
      }
    }
    &.tonal:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
    }
    &.outlined:not(:disabled) {
      border: 1px solid var(--button-outline);
      --button-text: var(--color-dark-primary);
      --button-surface: transparent;
      &.secondary {
        --button-text: var(--color-dark-secondary);
      }
      &.tertiary {
        --button-text: var(--color-dark-tertiary);
      }
      &.danger {
        --button-text: var(--color-dark-error);
      }
      &.warn {
        --button-text: var(--color-dark-warning);
      }
      &.success {
        --button-text: var(--color-dark-success);
      }
      &.info {
        --button-text: var(--color-dark-info);
      }
      &:hover {
        background-color: color-mix(in oklch, var(--button-text) 8%, transparent);
        box-shadow: var(--elevation-dark-0);
      }
      &:active {
        background-color: color-mix(in oklch, var(--button-text) 18%, transparent);
      }
    }
    &.outlined:disabled {
      border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
    }
    &.text:not(:disabled) {
      --button-text: var(--color-dark-primary);
      --button-surface: transparent;
      &.secondary {
        --button-text: var(--color-dark-secondary);
      }
      &.tertiary {
        --button-text: var(--color-dark-tertiary);
      }
      &.danger {
        --button-text: var(--color-dark-error);
      }
      &.warn {
        --button-text: var(--color-dark-warning);
      }
      &.success {
        --button-text: var(--color-dark-success);
      }
      &.info {
        --button-text: var(--color-dark-info);
      }
      &:hover {
        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
        box-shadow: var(--elevation-dark-0);
      }
      &:active {
        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
      }
    }
    &.text:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: transparent;
    }
    &.icon:not(:disabled) {
      --button-text: var(--color-dark-on-surface-variant);
      --button-surface: transparent;
      &.selected {
        --button-text: var(--color-dark-primary);
        &.secondary {
          --button-text: var(--color-dark-secondary);
        }
        &.tertiary {
          --button-text: var(--color-dark-tertiary);
        }
        &.danger {
          --button-text: var(--color-dark-error);
        }
        &.warn {
          --button-text: var(--color-dark-warning);
        }
        &.success {
          --button-text: var(--color-dark-success);
        }
        &.info {
          --button-text: var(--color-dark-info);
        }
      }
      &:hover {
        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
        box-shadow: var(--elevation-dark-0);
      }
      &:active {
        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
      }
    }
    &.icon:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: transparent;
    }
    &.filled_icon:not(:disabled) {
      --button-text: var(--color-dark-on-primary);
      --button-surface: var(--color-dark-primary);
      &.secondary {
        --button-text: var(--color-dark-on-secondary);
        --button-surface: var(--color-dark-secondary);
      }
      &.tertiary {
        --button-text: var(--color-dark-on-tertiary);
        --button-surface: var(--color-dark-tertiary);
      }
      &.danger {
        --button-text: var(--color-dark-on-error);
        --button-surface: var(--color-dark-error);
      }
      &.warn {
        --button-text: var(--color-dark-on-warning);
        --button-surface: var(--color-dark-warning);
      }
      &.success {
        --button-text: var(--color-dark-on-success);
        --button-surface: var(--color-dark-success);
      }
      &.info {
        --button-text: var(--color-dark-on-info);
        --button-surface: var(--color-dark-info);
      }
      &.unselected {
        --button-text: var(--color-dark-primary);
        --button-surface: var(--color-dark-surface-container-highest);
      }
    }
    &.filled_icon:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
    }
    &.tonal_icon:not(:disabled) {
      --button-text: var(--color-dark-on-primary-container);
      --button-surface: var(--color-dark-primary-container);
      &.secondary {
        --button-text: var(--color-dark-on-secondary-container);
        --button-surface: var(--color-dark-secondary-container);
      }
      &.tertiary {
        --button-text: var(--color-dark-on-tertiary-container);
        --button-surface: var(--color-dark-tertiary-container);
      }
      &.danger {
        --button-text: var(--color-dark-on-error-container);
        --button-surface: var(--color-dark-error-container);
      }
      &.warn {
        --button-text: var(--color-dark-on-warning-container);
        --button-surface: var(--color-dark-warning-container);
      }
      &.success {
        --button-text: var(--color-dark-on-success-container);
        --button-surface: var(--color-dark-success-container);
      }
      &.info {
        --button-text: var(--color-dark-on-info-container);
        --button-surface: var(--color-dark-info-container);
      }
      &.unselected {
        --button-text: var(--color-dark-on-surface-variant);
        --button-surface: var(--color-dark-surface-container-highest);
      }
      &:hover {
        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
        box-shadow: var(--elevation-dark-0);
      }
      &:active {
        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
      }
    }
    &.tonal_icon:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
    }
    &.outlined_icon:not(:disabled) {
      --button-text: var(--color-dark-on-surface-variant);
      --button-surface: transparent;
      border: 1px solid var(--button-outline);
      &.selected {
        --button-text: var(--color-dark-inverse-on-surface);
        --button-surface: var(--color-dark-inverse-surface);
      }
      &:hover {
        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
        box-shadow: var(--elevation-dark-0);
      }
      &:active {
        --button-surface: color-mix(in oklch, var(--button-text) 18%, transparent);
      }
    }
    &.outlined_icon:disabled {
      --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      --button-surface: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
      border: 1px solid color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
    }
  }
}