/*
  Panel
*/

.Panel {
  background: var(--panel-background);
  border: var(--panel-border);
  border-radius: var(--panel-radius);
  block-size: 100%;
}

.Panel-Heading {
  font-size: var(--text-size-m);
  font-family: var(--base-font-family);
  padding: var(--panel-heading-padding);
}

.Panel:has(.Panel-Heading) .Panel-Content {
  padding: var(--panel-content-has-heading-padding);
}

.Panel-Content {
  padding: var(--panel-content-no-heading-padding);
}

.Panel-Delta {
  font-size: var(--text-size-s);
  color: var(--color-mid);
  margin-block-start: var(--space-2xs);
}

.Panel-Delta strong {
  color: var(--color-success);
  font-weight: var(--font-bold);
}

.Panel-Delta[variant="down"] strong {
  color: var(--color-danger);
}

.u-section-request .Panel {
  border-color: var(--panel-border-request);
}

.u-section-client .Panel {
  border-color: var(--panel-border-client);
}

.u-section-hatha .Panel {
  border-color: var(--panel-border-hatha);
}

.Panel[variant="balance"] {
  --panel-background: var(--color-hcc-primary-weak);
  --button-bg: var(--color-hcc-primary-1);
  border: none;
}
.Panel[variant="balance"] .Panel-Heading {
  color: var(--color-hcc-primary-1);
}

.Panel[variant="hatha"] {
  --panel-background: var(--color-hcc-secondary-weak);
  --button-bg: var(--color-hcc-secondary);
  border: none;
}
.Panel[variant="hatha"] .Panel-Heading {
  color: var(--color-hcc-secondary);
}

.Panel[variant="note"] {
  --panel-background: var(--color-offwhite);
  border: none;
}

.Panel[variant="danger"] {
  --panel-background: var(--color-danger-weak);
  --button-bg: var(--color-danger);
  border: none;
}
.Panel[variant="danger"] .Panel-Heading {
  color: var(--color-danger);
}

.Panel[variant="warning"] {
  --panel-background: var(--color-warning-weak);
  --button-bg: var(--color-warning);
  border: none;
}
.Panel[variant="warning"] .Panel-Heading {
  color: var(--color-warning);
}