/*
 * The appointments screen: making appointments with consignees on the phone.
 *
 * Making the appointment is what the screen is for, so that one button is filled in the theme's
 * primary colour. Moving the plan date and printing belong to the same job and stand beside it as
 * an outline in a second colour: set apart from the rest of the toolbar, without two filled
 * buttons of one colour side by side. Both come from the theme's own tokens. The light theme's
 * secondary is the house teal; the dark theme's is a grey that reads as a button switched off, so
 * there the outline takes the theme's info colour, which stands apart from its blue primary.
 */
.s-Toolbar {
    --tool-button-second-colour: var(--bs-secondary);
}

[data-bs-theme="dark"] .s-Toolbar {
    --tool-button-second-colour: var(--bs-info);
}

.s-Toolbar .tool-button.tool-button-primary {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.s-Toolbar .tool-button.tool-button-secondary {
    background-color: transparent;
    border: 1px solid var(--tool-button-second-colour);
    color: var(--tool-button-second-colour);
}

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

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

.s-Toolbar .tool-button.tool-button-secondary:hover {
    background-color: color-mix(in srgb, var(--tool-button-second-colour) 12%, transparent);
}