/* public/app/css/dash-compose-tools.css
 * Synopsis: Icônes ZIP, copie et import dans la coque texte.
 * Objectif: Triangle haut-droite, cliquable sans gêner.
 */

.dash .dash-compose__tools {
    display: grid;
    gap: .35rem;
    grid-template-columns: auto auto auto;
    grid-template-rows: auto auto;
    pointer-events: none;
    position: absolute;
    right: .55rem;
    top: .45rem;
    z-index: 3;
}

.dash .dash-compose-ico--zip {
    grid-column: 2;
    grid-row: 1;
}

.dash .dash-compose-ico--copy {
    font-size: 1rem;
    grid-column: 3;
    grid-row: 1;
    letter-spacing: 0;
}

.dash .dash-compose-ico--import {
    font-size: .95rem;
    grid-column: 3;
    grid-row: 2;
    letter-spacing: 0;
}

.dash .dash-compose-ico {
    align-items: center;
    background: color-mix(in srgb, var(--dash-input-bg) 78%, var(--dash-accent-dim));
    border: 1px solid color-mix(in srgb, var(--dash-accent) 32%, var(--dash-line));
    border-radius: var(--dash-radius);
    box-shadow: 0 1px 0 color-mix(in srgb, var(--dash-text) 8%, transparent);
    color: color-mix(in srgb, var(--dash-accent) 72%, var(--dash-text));
    cursor: pointer;
    display: inline-flex;
    font-family: var(--display);
    font-size: .72rem;
    font-weight: 600;
    height: 2rem;
    justify-content: center;
    letter-spacing: .04em;
    min-width: 2rem;
    padding: 0 .45rem;
    pointer-events: auto;
    transition: none;
}

.dash .dash-compose-ico:hover:not(:disabled),
.dash .dash-compose-ico:focus-visible:not(:disabled) {
    background: color-mix(in srgb, var(--dash-accent) 18%, var(--dash-input-bg));
    border-color: color-mix(in srgb, var(--dash-accent) 42%, var(--dash-line));
    color: color-mix(in srgb, var(--dash-accent) 78%, var(--dash-text));
    outline: none;
}

.dash .dash-compose-ico:disabled {
    cursor: not-allowed;
    opacity: .35;
}