@use "variables" as *;

@mixin panel {
  border: 1px solid $color-border;
  border-radius: $radius-panel;
  background: $color-panel-bg;
  box-shadow: $shadow-soft;
}

@mixin card {
  display: flex;
  overflow: hidden;
  flex-direction: column;
  min-height: 250px;
  padding: 1.25rem;
  border: 1px solid $color-border-soft;
  border-radius: $radius-card;
  background: $color-card-bg;
  box-shadow: $shadow-soft;
}

@mixin section-title {
  color: $color-text-soft;
  font-size: $font-size-md;
  font-weight: 700;
  line-height: 1.2;
}

@mixin kpi-value {
  color: $color-text-strong;
  font-size: $font-size-xxl;
  font-weight: 700;
  line-height: 1;
}

@mixin control {
  min-height: 40px;
  padding: 0.65rem 0.85rem;
  transition:
    border-color 0.2s ease,
    background-color 0.2s ease,
    box-shadow 0.2s ease;
  color: $color-text;
  border: 1px solid $color-border;
  border-radius: 12px;
  background: $color-panel-bg;
  font-size: $font-size-sm;

  &:focus {
    border-color: $color-blue-strong-tint-50;
    outline: 0;
    box-shadow: 0 0 0 3px $color-blue-tint-10;
  }
}

@mixin button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.65rem 0.95rem;
  cursor: pointer;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  color: $color-text;
  border: 1px solid $color-border;
  border-radius: 12px;
  background: $color-panel-bg;
  font-size: $font-size-sm;
  font-weight: 700;

  &:hover {
    background: $color-blue-tint-05;
  }

  &:disabled,
  &[aria-disabled="true"] {
    cursor: not-allowed;
    opacity: 0.55;
  }
}

@mixin subtle-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: 0.3rem 0.65rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: $radius-pill;
  font-size: 11px;
}

@mixin scrollable-panel {
  overflow: auto;
  scrollbar-width: thin;
}
