/*
  MFP Design System — Split Buttons
  Production CSS for split buttons component.
  Import tokens.css before this file.
*/

/* ======================================================================
   SPLIT BUTTONS
   ====================================================================== */
.split-btn {
  display: inline-flex;
  height: 44px;
  border-radius: var(--radius-sm);
  position: relative;
}

.split-btn__label,
.split-btn__chevron {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  outline: none;
  position: relative;
  overflow: hidden;
  font: var(--type-button-label);
  letter-spacing: 0.25px;
  white-space: nowrap;
  background: transparent;
  color: inherit;
}

.split-btn__label {
  padding: 0 12px;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.split-btn__chevron {
  width: 44px;
  flex-shrink: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* Hover overlays */
.split-btn__label::after,
.split-btn__chevron::after {
  content: '';
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
  transition: background 150ms;
}

.split-btn__label:hover::after,
.split-btn__label.is-hover::after,
.split-btn__chevron:hover::after,
.split-btn__chevron.is-hover::after { background: rgba(0, 19, 73, 0.08); }

/* Divider — double 1px indent: black shadow left, white highlight right */
.split-btn__chevron::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Chevron icon rotation when open */
.split-btn__chevron .material-symbols-outlined {
  font-size: 20px;
  transition: transform 200ms;
}
.split-btn.is-open .split-btn__chevron .material-symbols-outlined { transform: rotate(180deg); }

/* Variants */
.split-btn--primary { background: var(--color-action); color: var(--color-white); }
.split-btn--secondary { background: transparent; color: var(--color-action); border: 1.5px solid var(--color-action); }
.split-btn--secondary .split-btn__chevron::before { background: var(--color-action); opacity: 0.25; box-shadow: none; }

/* Disabled */
.split-btn.is-disabled {
  background: var(--color-medium-grey) !important;
  color: var(--color-dark-grey) !important;
  border: none !important;
  cursor: not-allowed;
  pointer-events: none;
}
.split-btn.is-disabled .split-btn__chevron::before { background: var(--color-dark-grey); opacity: 0.2; }

/* Size: sm */
.split-btn--sm { height: 32px; }
.split-btn--sm .split-btn__label   { padding: 4px 8px; font: var(--type-button-label-sm); gap: var(--space-4); }
.split-btn--sm .split-btn__chevron { width: 32px; font: var(--type-button-label-sm); }
.split-btn--sm .split-btn__chevron .material-symbols-outlined { font-size: 18px; }