:root {
  --pab-sm-height: 28px;
  --pab-sm-pill-padding-x: 8px;
  --pab-sm-icon-size: 14px;
  --pab-sm-min-width: 34px;

  --pab-md-height: 34px;
  --pab-md-pill-padding-x: 9px;
  --pab-md-icon-size: 16px;
  --pab-md-min-width: 40px;
}

#app .panel-action-button {
  --pab-bg: rgba(15, 23, 42, 0.68);
  --pab-border: rgba(255, 255, 255, 0.26);
  --pab-shadow: rgba(15, 23, 42, 0.22);
  --pab-hover-bg: rgba(30, 41, 59, 0.84);
  --pab-hover-border: rgba(255, 255, 255, 0.34);
  --pab-active-bg: rgba(15, 23, 42, 0.9);
  --pab-focus-ring: rgba(147, 197, 253, 0.38);
  --pab-height: var(--pab-md-height);
  --pab-min-width: var(--pab-md-min-width);
  --pab-pill-padding-x: var(--pab-md-pill-padding-x);
  --pab-icon-size: var(--pab-md-icon-size);
  appearance: none;
  border: 1px solid var(--pab-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.03) 100%), var(--pab-bg);
  color: #ffffff;
  min-width: var(--pab-min-width);
  height: var(--pab-height);
  padding: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 5px 12px var(--pab-shadow);
  transition:
    background 0.16s ease,
    border-color 0.16s ease,
    transform 0.12s ease,
    box-shadow 0.16s ease,
    opacity 0.16s ease;
}

#app .panel-action-button:hover {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0.04) 100%), var(--pab-hover-bg);
  border-color: var(--pab-hover-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    0 7px 14px var(--pab-shadow);
  transform: translateY(-1px);
}

#app .panel-action-button:active {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0.02) 100%), var(--pab-active-bg);
  transform: translateY(1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.1),
    0 3px 8px var(--pab-shadow);
}

#app .panel-action-button:focus-visible {
  outline: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 0 0 3px var(--pab-focus-ring),
    0 5px 12px var(--pab-shadow);
}

#app .panel-action-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 2px 5px rgba(15, 23, 42, 0.14);
}

#app .panel-action-button--sm {
  --pab-height: var(--pab-sm-height);
  --pab-min-width: var(--pab-sm-min-width);
  --pab-pill-padding-x: var(--pab-sm-pill-padding-x);
  --pab-icon-size: var(--pab-sm-icon-size);
}

#app .panel-action-button--md {
  --pab-height: var(--pab-md-height);
  --pab-min-width: var(--pab-md-min-width);
  --pab-pill-padding-x: var(--pab-md-pill-padding-x);
  --pab-icon-size: var(--pab-md-icon-size);
}

#app .panel-action-button--round {
  width: var(--pab-height);
  min-width: var(--pab-height);
  padding: 0;
}

#app .panel-action-button--pill {
  width: auto;
  padding: 0 var(--pab-pill-padding-x);
}

#app .panel-action-button--neutral {
  --pab-bg: rgba(15, 23, 42, 0.68);
  --pab-border: rgba(255, 255, 255, 0.26);
  --pab-shadow: rgba(15, 23, 42, 0.22);
  --pab-hover-bg: rgba(30, 41, 59, 0.84);
  --pab-hover-border: rgba(255, 255, 255, 0.34);
  --pab-active-bg: rgba(15, 23, 42, 0.9);
}

#app .panel-action-button--danger {
  --pab-bg: rgba(190, 24, 93, 0.88);
  --pab-border: rgba(254, 205, 211, 0.42);
  --pab-shadow: rgba(190, 24, 93, 0.2);
  --pab-hover-bg: rgba(225, 29, 72, 0.94);
  --pab-hover-border: rgba(254, 205, 211, 0.54);
  --pab-active-bg: rgba(159, 18, 57, 0.96);
}

#app .panel-action-button--primary {
  --pab-bg: rgba(37, 99, 235, 0.88);
  --pab-border: rgba(191, 219, 254, 0.46);
  --pab-shadow: rgba(37, 99, 235, 0.2);
  --pab-hover-bg: rgba(59, 130, 246, 0.94);
  --pab-hover-border: rgba(219, 234, 254, 0.56);
  --pab-active-bg: rgba(29, 78, 216, 0.96);
}

#app .panel-action-button--selected {
  --pab-bg: rgba(22, 163, 74, 0.9);
  --pab-border: rgba(187, 247, 208, 0.5);
  --pab-shadow: rgba(22, 163, 74, 0.2);
  --pab-hover-bg: rgba(34, 197, 94, 0.94);
  --pab-hover-border: rgba(220, 252, 231, 0.58);
  --pab-active-bg: rgba(21, 128, 61, 0.96);
}

#app .panel-action-button__icon {
  width: var(--pab-icon-size);
  height: var(--pab-icon-size);
  display: block;
  pointer-events: none;
  user-select: none;
}

#app .panel-action-button__label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
}