/*
 * The appointments screen: making appointments with consignees on the phone.
 *
 * The two buttons the screen is for stand out from the rest of its toolbar in the house accent, the
 * theme's own primary colour, so they follow the light and the dark theme alike.
 */
.s-Toolbar .tool-button.tool-button-accent {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: var(--bs-btn-active-color, #fff);
}

.s-Toolbar .tool-button.tool-button-accent .button-inner,
.s-Toolbar .tool-button.tool-button-accent i {
    color: inherit;
}

.s-Toolbar .tool-button.tool-button-accent:hover {
    filter: brightness(1.1);
}

/*
 * A shipment's own buttons on its row: print its labels, make its appointment. Plain icons in the
 * accent colour, so a row stays a row to read and the buttons are there when wanted.
 */
.appointment-actions {
    display: inline-flex;
    gap: 4px;
}

.appointment-action {
    padding: 0 6px;
    background: none;
    border: 0;
    color: var(--bs-primary);
    line-height: inherit;
}

.appointment-action:hover,
.appointment-action:focus {
    color: var(--bs-body-color);
}