/* Floating toolbar over the image stage (options A and B). */
.toolbar {
    position: absolute;
    top: calc(var(--offset) + 16px);
    right: calc(var(--offset) + 16px);
    display: flex;
    justify-content: flex-end;
    align-items: stretch;
    gap: 0.25rem;
    transition: opacity var(--transition), transform var(--transition);
    opacity: 0;
    transform: translateY(10%);
    z-index: -1;
}

.toolbar--visible {
    opacity: 1;
    transform: translateY(0);
    z-index: 10;
}

.toolbar__item {
    padding: 10px;
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    font-weight: 600;
    text-align: right;
}

.toolbar__btn {
    --size: 32px;
    position: relative;
    padding: 10px;
    overflow: hidden;
}

.toolbar__btn-placeholder {
    width: var(--size);
    height: var(--size);
}

/* The two icon states are stacked and cross-faded — colour only, no movement. */
.toolbar__btn-icon {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--transition);
}

.toolbar__btn-icon svg {
    width: var(--size);
    height: var(--size);
}

.toolbar__btn-icon--active {
    background-color: var(--color-accent);
    color: var(--color-white);
}

.toolbar__btn-icon--disabled {
    background-color: var(--color-white);
    color: var(--color-accent);
}

.toolbar__btn-icon--visible {
    opacity: 1;
}