estim_control/src/components.css

@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);
    &.veritcal {
      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);
    &.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-text: var(--color-dark-on-primary);
      box-shadow: var(--elevation-dark-1-ambient), var(--elevation-dark-1-umbra);
    }
    &:active:not(:disabled) {
      color: color-mix(in oklch, var(--button-text) 12%, transparent);
    }
    &.tonal:not(:disabled) {
      --button-text: var(--color-dark-on-primary-container);
      --button-surface: var(--color-dark-primary-container);
    }
    &.danger:not(:disabled) {
      --button-text: var(--color-dark-on-error);
      --button-surface: var(--color-dark-error);
    }
    &.warn:not(:disabled) {
      --button-text: var(--color-dark-on-warning);
      --button-surface: var(--color-dark-warning);
    }
    &.success:not(:disabled) {
      --button-text: var(--color-dark-on-success);
      --button-surface: var(--color-dark-success);
    }
    &.info:not(:disabled) {
      --button-text: var(--color-dark-on-info);
      --button-surface: var(--color-dark-info);
    }
    &: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);
      --button-outline: color-mix(in oklch, var(--color-dark-on-surface) 12%, transparent);
      cursor: not-allowed;
    }
    &.outline {
      --button-text: var(--color-dark-primary);
      --button-surface: transparent;
      border: 1px solid var(--button-outline);
      &:hover:not(:disabled) {
        --button-text: var(--color-dark-primary);
        --button-surface: color-mix(in oklch, var(--button-text) 8%, transparent);
        box-shadow: var(--elevation-dark-0);
      }
      &:active:not(:disabled) {
        --button-text: var(--color-dark-primary);
        --button-surface: color-mix(in oklch, var(--button-text) 10%, transparent);
        box-shadow: var(--elevation-dark-0);
      }
      &.danger:not(:disabled) {
        --button-text: var(--color-dark-error);
      }
      &.warn:not(:disabled) {
        --button-text: var(--color-dark-warning);
      }
      &.success:not(:disabled) {
        --button-text: var(--color-dark-success);
      }
      &.info:not(:disabled) {
        --button-text: var(--color-dark-info);
      }
      &:disabled {
        --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      }
    }
    &.text {
      --button-text: --color-dark-primary;
      --button-surface: transparent;
      border: none;
      &:hover:not(:disabled) {
        --button-surface: color-mix(in oklch, var(--color-dark-primary) 8%, transparent);
      }
      &:active:not(:disabled) {
        --button-surface: color-mix(in oklch, var(--color-dark-primary) 10%, transparent);
      }
      &.danger:not(:disabled) {
        --button-text: var(--color-dark-error);
        --button-surface: transparent;
      }
      &.warn:not(:disabled) {
        --button-text: var(--color-dark-warning);
        --button-surface: transparent;
      }
      &.success:not(:disabled) {
        --button-text: var(--color-dark-success);
        --button-surface: transparent;
      }
      &.info:not(:disabled) {
        --button-text: var(--color-dark-info);
        --button-surface: transparent;
      }
      &:disabled {
        --button-text: color-mix(in oklch, var(--color-dark-on-surface) 38%, transparent);
      }
    }
  }
}