/* This file provides the structure only
   for various GForm layouts. Themes can
   add their own colors, etc. */


/* Opt in to container queries. This can go on
   the <form> tag itself or internal wrapper. */
.gform {
    container-type: inline-size;
}

/*
 CLASSIC LAYOUT
 ==============
 Single column in small containers using an implicit grid.
*/
.gform-classic .block { /* Note ".row" is used by Bootstrap */
    margin: 1rem 0 1.25rem 0;
    display: grid;
    gap: .375rem;
}
/*
 Two column in medium containers with 5 rows (tracks).
 The "field" moves up next to "label" cell (slot).
 */
@container (min-width: 34rem) { /* ~550px. Two column five track layout */
    .gform-classic .block {
        margin: 1rem 0;
        grid-template-columns: 8rem auto;
        grid-template-rows: auto 1fr auto auto auto;
        gap: .5rem 1.2rem;
        align-items: baseline; /* labels in line with input text */
        /* content slots */
        & .upper {
            grid-column: 1 / -1;
            grid-row: 1;
        }
        & .label {
            grid-column: 1;
            grid-row: 2;
        }
        & .field {
            grid-column: 2;
            grid-row: 2;
        }
        & .extra {
            grid-column: 2;
            grid-row: 3;
        }
        & .spare {
            grid-column: 2 / -1;
            grid-row: 4;
            max-width: 75ch;
        }
        & .lower {
            grid-column: 1 / -1;
            grid-row: 5;
        }
        /* Utility classes to reposition .upper, .lower & .spare */
        /* The div to which this class is applied becomes tethered to the same column as the slot given in the
           class name. Eg "align-field" means "align with the 'field' slot".  */
        & .align-label { /* Horizontal */
            grid-column: 1 / -1;
        }
        & .align-field, & .align-extra { /* Horizontal */
            grid-column: 2 / -1;
        }
        & .align-top { /* For labels. Looks good with text areas. Vertical */
            align-self: start;
        }
        & .align-bottom { /* Vertical */
            align-self: end;
        }
    }
    /* Right aligned labels */
    .gform-classic.label-right .block .label {
        text-align: right;
    }
}
/*
 Three column in wide containers.
 The "extra" slot shifts up next to the "field". The 4th
 track remains empty which simply collapses.
 */
@container (min-width: 44rem) { /* ~700px. Add third column */
    .gform-classic .block {
        grid-template-columns: 8rem 24rem auto; /* ~ 180px / 350px */
        & .extra {
            grid-column: 3;
            grid-row: 2;
        }
        /* Utility classes to reposition .upper, .lower & .spare */
        & .align-extra {
            grid-column: 3 / -1;
        }
    }
}


/* GForm Error Styles TODO, scope to bootstrap */


/* Fields
   Make background red. Usually on field but can be div, p tag also */
.gfm-error {
    background-color: #fffcfc !important;
    border: 1px dotted #dd0000 !important;
    display: inline-block;
}

/* On <form> element itself. This is applied when validating
    at form level. If any of the form's fields are in error,
    the form tag gets a class of 'has-gform-errors'. This is
    not styled, a hook for JS only. */
form.gfm-error {
    border: 1px solid rgba(255, 180, 180, 0.68);
    padding: 10px;
    display: block;
}

/* Wrapper element for Checkbox and Radio groups */
.gfm-group {
    display: inline-block; /* wrapper around field options */
    padding: 4px 8px;
    border: 1px solid transparent; /* stop jarring when error styles disappear */
}
.gfm-group.gfm-error {
    border-color: rgba(255, 180, 180, 0.68); /* reinstate the border color */
}


/* Messages */
span.gfm-error-message {
    color: #ce3232;
    padding: 3px 0 0 5px;
    font-size: .8rem;
    display: block;
    transition: color 1s; /* fade to grey */
}

/* Tags inside error messages */
span.gfm-error-message b, span.gfm-error-message strong { color: #c00; }
span.gfm-error-message i, span.gfm-error-message em { color: #a00; }
span.gfm-error-message code { background-color: #ffb4b4; color: #700; }

/* Soften errors when field gets focus */
span.gfm-error-message-focused, span.gfm-error-message-focused * {
    color: #a9a9a9; /* mute the red text */
}

/* If using widget-grid, closed tabs may conceal error messages. Highlight the buttons. */
form.has-gform-errors .widget-gform-error {
    text-decoration: underline;
    text-decoration-color: #d21e1e;
    text-decoration-style: wavy;
}