/* Action de champ — module canonique du champ ; son emploi : canon_field-action.md. */

@layer components {
    .field-action-group {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
    }
    .field-action-group > .field-control,
    .field-action-group > .field-action {
        grid-area: 1 / 1;
    }
    .field-action-group:has(> .field-action:not([hidden])) > .field-control {
        padding-inline-end: var(--canon-size-icon-target);
    }
    .field-action-group:has(> .field-action:not([hidden]) ~ .field-action:not([hidden])) > .field-control {
        padding-inline-end: calc(2 * var(--canon-size-icon-target));
    }
    .field-action {
        display: grid;
        place-items: center;
        justify-self: end;
        width: var(--canon-size-icon-target);
        padding: 0;
    }
    .field-action:has(~ .field-action:not([hidden])) {
        margin-inline-end: var(--canon-size-icon-target);
    }
    .field-action::before,
    .field-action::after {
        grid-area: 1 / 1;
    }
    .field-action--calendar::before {
        width: 1em;
        height: 0.9em;
    }
    .field-action--clear::before,
    .field-action--clear::after {
        width: 0.9em;
        transform: rotate(45deg);
    }
    .field-action--clear::after {
        transform: rotate(-45deg);
    }
    .field-action--show::before {
        width: 0.75em;
        height: 0.75em;
        transform: rotate(45deg);
    }
    .field-action--show::after {
        width: 0.3em;
        height: 0.3em;
    }
    .field-action--show[aria-pressed="true"]::after {
        width: 1.2em;
        height: 0;
        transform: rotate(-45deg);
    }
}

@layer components {
    .field-action-group:has(> .field-action:hover) > .field-control:not(:disabled, [readonly]) {
        border-color: var(--canon-theme-ink);
    }
    .field-action {
        border: 0;
        border-radius: var(--canon-radius-control);
        background-color: transparent;
    }
    .field-action:focus-visible {
        outline-offset: calc(-1 * var(--canon-focus-width));
    }
    .field-action--calendar::before {
        border: 2px solid currentColor;
        border-block-start-width: 0.25em;
        border-radius: 2px;
    }
    .field-action--clear::before,
    .field-action--clear::after {
        border-block-start: 2px solid currentColor;
    }
    .field-action--show::before {
        border: 2px solid currentColor;
        border-radius: 75% 15%;
    }
    .field-action--show::after {
        border: 0.15em solid currentColor;
        border-radius: 50%;
    }
    .field-action--show[aria-pressed="true"]::after {
        border-width: 2px 0 0;
        border-radius: 0;
    }

    .field-action {
        color: var(--canon-theme-muted);
    }
    .field-action:hover {
        color: var(--canon-theme-ink);
    }
    .field-action:disabled {
        color: var(--canon-theme-faint);
    }
    .field-action--calendar::before,
    .field-action--clear::before,
    .field-action--clear::after,
    .field-action--show::before,
    .field-action--show::after {
        content: "";
    }

    .field-action {
        cursor: pointer;
        transition: color var(--canon-duration-state);
    }
    .field-action:disabled {
        cursor: default;
    }
}