/* De selector matcht twee dingen:
   1. .brxe-button.ejk-button  — knoppen die je zelf plaatst
   2. .submit-button-wrapper > button — de submit-knop van het Bricks
      formulier, die geen .brxe-button of .ejk-button krijgt en dus niet
      handmatig van een class te voorzien is.
   De specificiteit is ongewijzigd: :is() telt zijn zwaarste argument,
   dus (0,2,0) net als .brxe-button + :is(.ejk-button) samen. */

:root:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button {
    --_pb: var(--at-btn-medium-padding-block);
    --_pi: var(--at-btn-medium-padding-inline);
    --_fs: var(--at-btn-medium-font-size);
    --_fw: var(--at-btn-medium-font-weight);
    --_ls: var(--at-btn-medium-letter-spacing);
    --_ig: var(--at-btn-medium-icon-gap);
    --_isz: var(--at-btn-medium-icon-size);
    --_line-height-body: normal;              /* was ongedefinieerd; 'normal' == huidige weergave */
    --_shape: initial;                           /* geen vorm-modifier actief */
    --_br: var(--_shape, var(--at-radius--s));
    --_bgc: var(--at-btn-primary-background);
    --_brc: var(--at-btn-primary-border-color);
    --_tc: var(--at-btn-primary-color);
    --_ic: var(--at-btn-primary-icon-color);
    --_sh: 4px 4px 10px var(--ejk-grey-t-6); /* shadow */
    --_ia-dur: 300ms;
    --_ia-del: 10ms;
    --_ia-dis: 15px;
    --_hover-gradient: none;
    --_before-op: 0.1;
    --_before-op-hover: 1;

    font-size: var(--_fs);
    font-style: normal;
    font-weight: var(--_fw);
    line-height: var(--_line-height-body);
    text-transform: none;
    letter-spacing: var(--_ls);
    height: fit-content;
    box-sizing: border-box;
    border-radius: var(--_br);
    padding: calc(var(--_pb) + 0.25rem) var(--_pi) var(--_pb);
    justify-content: space-between;
    gap: var(--_ig);
    position: relative;
    z-index: 1;
    overflow: hidden;
    background-color: var(--_bgc);
    color: var(--_tc);
    border-color: var(--_brc);
    box-shadow: var(--_sh);

    transition:
            transform var(--_ia-dur) ease-in-out var(--_ia-del),
            color var(--_ia-dur) ease-in-out var(--_ia-del),
            text-shadow var(--_ia-dur) ease-in-out calc(var(--_ia-del) + 200ms);

    & > i,
    & > svg {
        font-size: var(--_isz);
        color: var(--_ic);

        transition: transform var(--_ia-dur) ease-in-out var(--_ia-del);
    }

    &.sm {
        --_fs: var(--at-btn-small-font-size);
        --_fw: var(--at-btn-small-font-weight);
        --_ls: var(--at-btn-small-letter-spacing);
        --_br: var(--_shape, var(--at-radius--s));
        --_pb: var(--at-btn-small-padding-block);
        --_pi: var(--at-btn-small-padding-inline);
        --_ig: var(--at-btn-small-icon-gap);
        --_isz: var(--at-btn-small-icon-size);
    }

    &.md {
        --_fs: var(--at-btn-medium-font-size);
        --_fw: var(--at-btn-medium-font-weight);
        --_ls: var(--at-btn-medium-letter-spacing);
        --_br: var(--_shape, var(--at-radius--s));
        --_pb: var(--at-btn-medium-padding-block);
        --_pi: var(--at-btn-medium-padding-inline);
        --_ig: var(--at-btn-medium-icon-gap);
        --_isz: var(--at-btn-medium-icon-size);
    }

    &.lg {
        --_fs: var(--at-btn-large-font-size);
        --_fw: var(--at-btn-large-font-weight);
        --_ls: var(--at-btn-large-letter-spacing);
        --_br: var(--_shape, var(--at-radius--s));
        --_pb: var(--at-btn-large-padding-block);
        --_pi: var(--at-btn-large-padding-inline);
        --_ig: var(--at-btn-large-icon-gap);
        --_isz: var(--at-btn-large-icon-size);
    }

    &.xl {
        --_fs: var(--at-btn-x-large-font-size);
        --_fw: var(--at-btn-x-large-font-weight);
        --_ls: var(--at-btn-x-large-letter-spacing);
        --_br: var(--_shape, var(--at-radius--s));
        --_pb: var(--at-btn-x-large-padding-block);
        --_pi: var(--at-btn-x-large-padding-inline);
        --_ig: var(--at-btn-x-large-icon-gap);
        --_isz: var(--at-btn-x-large-icon-size);
    }

    /* Vorm-modifier. Werkt in elke maat: de maatklassen lezen --_shape en
       vallen terug op hun eigen radius zolang die niet gezet is. */
    &.circle {
        --_shape: var(--at-radius-full);
    }
}

:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background-image: var(--_hover-gradient);
    opacity: var(--_before-op);
    transition: opacity var(--_ia-dur) ease-in-out var(--_ia-del);
    will-change: opacity;
}

:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button:hover::before {
    opacity: var(--_before-op-hover);
}

:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button[class*="primary"]:not(.outline) {
    --_bgc: var(--at-btn-primary-background);
    --_brc: var(--at-btn-primary-border-color);
    --_tc: var(--at-btn-primary-color);
    --_ic: var(--at-btn-primary-icon-color);

    --_hover-gradient: var(--at-btn-primary-background--hover);

    &:hover {
        --_brc: var(--at-btn-primary-border-color--hover);
        --_tc: var(--at-btn-primary-color--hover);
        --_ic: var(--at-btn-primary-icon-color--hover);

        text-shadow: 1px 1px black;
        box-shadow: var(--at-btn-shadow--hover);

        transform: translate(-2px, -2px);
    }
}

:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button[class*="secondary"]:not(.outline) {
    --_bgc: var(--at-btn-secondary-background);
    --_brc: var(--at-btn-secondary-border-color);
    --_tc: var(--at-btn-secondary-color);
    --_ic: var(--at-btn-secondary-icon-color);

    --_hover-gradient: var(--at-btn-secondary-background--hover);

    &:hover {
        --_brc: var(--at-btn-secondary-border-color--hover);
        --_tc: var(--at-btn-secondary-color--hover);
        --_ic: var(--at-btn-secondary-icon-color--hover);

        text-shadow: 1px 1px black;

        transform: translate(-2px, -2px);
        box-shadow: var(--at-btn-shadow--hover);
    }
}


:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button.outline[class*="primary"] {
    --_bgc: transparent;
    --_brc: var(--at-btn-primary-outline-border-color);
    --_tc: var(--at-btn-primary-outline-color);
    --_ic: var(--at-btn-primary-outline-icon-color);
    --_hover-gradient: var(--at-btn-primary-background--hover);

    & > i,
    & > svg {
        font-size: var(--_isz);
        color: var(--_ic);

        transition: transform var(--_ia-dur) ease-in-out var(--_ia-del);
    }

    &:hover {
        --_tc: var(--at-btn-primary-outline-color--hover);
        --_ic: var(--at-btn-primary-outline-icon-color--hover);
        --_brc: var(--at-btn-primary-outline-border-color--hover);

        text-shadow: 1px 1px black;

        transform: translate(-2px, -2px);
        box-shadow: var(--at-btn-shadow--hover);
    }
}

:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button.outline[class*="secondary"] {
    --_bgc: transparent;
    --_brc: var(--at-btn-secondary-outline-border-color);
    --_tc: var(--at-btn-secondary-outline-color);
    --_ic: var(--at-btn-secondary-outline-icon-color);
    --_hover-gradient: var(--at-btn-secondary-background--hover);

    & > i,
    & > svg {
        font-size: var(--_isz);
        color: var(--_ic);

        transition: transform var(--_ia-dur) ease-in-out var(--_ia-del);
    }

    &:hover {
        --_tc: var(--ejk-text-white);
        --_ic: var(--ejk-text-white);
        --_brc: var(--at-btn-secondary-border-color--hover);

        text-shadow: 1px 1px black;

        transform: translate(-2px, -2px);
        box-shadow: var(--at-btn-shadow--hover);
    }
}

/* Bricks zet .bricks-button.circle{border-radius:100px!important} binnen @layer bricks.
   Bij !important draait de cascade de layer-volgorde om en telt ongelaagde CSS als
   laatste layer, dus ongelaagd kan hier nooit van winnen -- ongeacht specificiteit.
   brx-button.css laadt voor frontend-layer.min.css, dus 'ejk' is de eerste layer. */
@layer ejk {
    :root:root :is(.brxe-button.ejk-button, .submit-button-wrapper > button).bricks-button {
        border-radius: var(--_br) !important;
    }
}