/* ─────────────────────────────────── */
/* COMPONENT: Pill buttons             */
/* ─────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
    border-radius: var(--radius-full);
    border: 2px solid var(--color-grey-200);
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    color: var(--color-grey-500);
    background-color: var(--color-bg);
    white-space: nowrap;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.pill:hover {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

.pill[data-active="true"] {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

.pill__icon {
    font-size: var(--icon-sm);
}

/* ─────────────────────────────────── */
/* BLOCK: Scale select                 */
/* ─────────────────────────────────── */

.scale-select {
    display: flex;
}

.scale-select .pill {
    flex: 1;
    min-width: 0;
    border-radius: 0;
    margin-right: -2px;
    /* collapse shared border */
    min-height: 2.5rem;
    padding: var(--space-1) var(--space-2);
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: var(--line-height-tight);
    gap: 0;
    position: relative;
    z-index: 0;
}

.scale-select .pill:first-child {
    border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.scale-select .pill:last-child {
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    margin-right: 0;
}

.scale-select .pill:hover,
.scale-select .pill[data-active='true'] {
    z-index: 1;
    /* bring to front so all 4 borders show */
}

/* Calculated (disabled) pill-display pills */
[data-role="pill-display"] .pill {
    border-style: dashed;
    cursor: default;
}

[data-role="pill-display"] .pill:hover {
    border-color: var(--color-grey-200);
    color: var(--color-grey-500);
}

[data-role="pill-display"] .pill[data-active='true']:hover {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
}

[data-role="pill-display"] .pill[data-active='true'] {
    z-index: 2;
}

/* ─────────────────────────────────── */
/* BLOCK: Scale select — stacked rows  */
/* ─────────────────────────────────── */

.scale-select-stack {
    display: flex;
    flex-direction: column;
}

.scale-select-stack .scale-select {
    margin-bottom: -2px;
    /* collapse shared horizontal border between rows */
}

.scale-select-stack .scale-select:last-child {
    margin-bottom: 0;
}

/* Reset all corner radii for pills inside a stack, then apply only the 4 actual corners */
.scale-select-stack .scale-select .pill:first-child,
.scale-select-stack .scale-select .pill:last-child {
    border-radius: 0;
}

.scale-select-stack .scale-select:first-child .pill:first-child {
    border-radius: var(--radius-md) 0 0 0;
}

.scale-select-stack .scale-select:first-child .pill:last-child {
    border-radius: 0 var(--radius-md) 0 0;
}

.scale-select-stack .scale-select:last-child .pill:first-child {
    border-radius: 0 0 0 var(--radius-md);
}

.scale-select-stack .scale-select:last-child .pill:last-child {
    border-radius: 0 0 var(--radius-md) 0;
}

/* ─────────────────────────────────── */
/* BLOCK: Scale select stack — aside   */
/* ─────────────────────────────────── */

/* Variant where one button spans the full height of all rows (right-side aside) */
.scale-select-stack--with-aside {
    flex-direction: row;
    align-items: stretch;
}

.scale-select-stack--with-aside .scale-select-stack__rows {
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Override right-side corner radii — aside button owns the top-right and bottom-right corners */
.scale-select-stack--with-aside .scale-select:first-child .pill:last-child,
.scale-select-stack--with-aside .scale-select:last-child .pill:last-child {
    border-radius: 0;
}

/* The aside button — spans full height, right-side corners only */
.scale-select-stack__aside {
    align-self: stretch;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1) var(--space-2);
    border: 2px solid var(--color-grey-200);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--font-sm);
    font-weight: var(--weight-medium);
    color: var(--color-grey-500);
    background-color: var(--color-bg);
    white-space: nowrap;
    margin-left: -2px;
    /* collapse shared border with rows */
    position: relative;
    z-index: 0;
    transition:
        color var(--transition-fast),
        border-color var(--transition-fast);
}

.scale-select-stack__aside:hover,
.scale-select-stack__aside[data-active='true'] {
    border-color: var(--color-blue-dark);
    color: var(--color-blue-dark);
    z-index: 1;
}

/* ─────────────────────────────────── */
/* VARIANT: Delete pill                */
/* ─────────────────────────────────── */

/* Icon on the right; swap padding so text has more room on the left */
.pill--delete {
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-2);
}

.pill--delete .pill__icon {
    color: var(--color-red-light);
}

.pill--delete:hover .pill__icon {
    color: var(--color-red);
}