@use "palette-colors" as *;

/* =========================
   SURFACES
========================= */

$surface-page: $color-black;
$surface-panel: $color-dark;
$surface-panel-muted: rgba($color-text-light, 0.045);
$surface-panel-strong: rgba($color-text-light, 0.085);

/* =========================
   BORDERS
========================= */

$border-width-base: 2px;
$border-width-accent: 6px;
$border-style-base: solid;
$border-color-base: $color-primary;
$border-color-muted: rgba($color-text-light, 0.24);

/* =========================
   MOTION
========================= */

$motion-fast: 0.15s;
$motion-base: 0.2s;
$motion-slow: 0.28s;
$motion-ease: ease;

/* =========================
   CONTROL SIZES
========================= */

$control-height-sm: 38px;
$control-height-md: 46px;
$control-height-lg: 54px;
$control-icon-rail-md: 46px;
$control-icon-rail-sm: 32px;
$control-choice-size: 18px;
$control-switch-width: 32px;
$control-switch-height: 16px;
$control-switch-knob: 20px;

/* =========================
   ICONS
========================= */

$icon-size-xs: 14px;
$icon-size-sm: 18px;
$icon-size-md: 22px;
$icon-size-lg: 26px;
$icon-size-xl: 32px;
$icon-size-display: 56px;

/* =========================
   FOCUS
========================= */

$focus-outline-width: 2px;
$focus-outline-offset: 3px;
$focus-outline-color: $color-warning;

@mixin focus_ring {
  outline: $focus-outline-width solid $focus-outline-color;
  outline-offset: $focus-outline-offset;
}

@mixin hard_panel($border-color: $border-color-muted, $accent-width: 0) {
  background: $surface-panel-muted;
  border: $border-width-base $border-style-base $border-color;

  @if $accent-width != 0 {
    border-left-width: $accent-width;
  }
}

@mixin state_panel($color, $text-color: $color-black) {
  border-color: $color;

  .card-title,
  .toast-title,
  .modal-title {
    color: $text-color;
    background: $color;
  }
}