// ==========================================================================

// Formie Base for Craft CMS
// Author: Verbb - https://verbb.io/

// ==========================================================================

// ==========================================================================
// Framework - Instance
// ==========================================================================

.fui-form {
    // `<form>` elements have margin by default
    margin: 0;

    &[data-fui-disabled] {
        opacity: 0.5;
        pointer-events: none;
        transition: opacity 0.3s ease-in-out;
    }
}

.fui-hidden {
    display: none;
}

.fui-sr-only,
[data-fui-sr-only] {
    clip: rect(0,0,0,0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    position: absolute;
    width: 1px;
}

// ==========================================================================
// Field Layout
// ==========================================================================

.fui-field {
    // For conditions - better than classes, and doesn't rely on toggling
    // between none/block. Maybe we don't want the field to be display: block?
    &[data-conditionally-hidden] {
        display: none;
    }
}

.fui-label-left-input,
.fui-label-right-input {
    .fui-field-container {
        display: flex;
        align-items: baseline;
    }

    .fui-input-wrapper {
        flex: 1;
    }
}

.fui-label-above-input {
    // This causes alignment issues with errors in columns
    // align-self: flex-end;
}

.fui-label-below-input {
    // Force legends to display in the correct position.
    > .fui-field-container > .fui-input-wrapper > .fui-fieldset > .fui-legend {
        display: block;
        float: left;
        clear: both;
        width: 100%;
    }
}

.fui-layout-horizontal .fui-layout-wrap {
    display: flex;
    flex-wrap: wrap;
}


// ==========================================================================
// Forms - Layout
// ==========================================================================

.fui-row {
    --field-min-width: var(--fui-field-min-width-2col);

    display: grid;
    gap: var(--fui-field-gutter);
    grid-template-columns: repeat(auto-fit, minmax(var(--field-min-width), 1fr));

    &[data-fui-field-count='3'] {
        --field-min-width: var(--fui-field-min-width-3col);
    }

    &[data-fui-field-count='4'] {
        --field-min-width: var(--fui-field-min-width-4col);
    }

    &[data-fui-field-count='5'],
    &[data-fui-field-count='6'],
    &[data-fui-field-count='7'],
    &[data-fui-field-count='8'] {
        --field-min-width: var(--fui-field-min-width-5col);
    }
}


// ==========================================================================
// Forms - Pages
// ==========================================================================

[data-fui-page-hidden] {
    display: none;
}


// ==========================================================================
// Forms - Submit
// ==========================================================================

.fui-btn-wrapper,
.fui-btn-container {
    display: flex;
    justify-content: flex-start;

    &.fui-btn-right {
        justify-content: flex-end;
    }

    &.fui-btn-center,
    &.fui-btn-center-save-right,
    &.fui-btn-center-save-left {
        justify-content: center;
    }

    &.fui-btn-left-right,
    &.fui-btn-save-right,
    &.fui-btn-save-left {
        justify-content: space-between;
    }

    &.fui-btn-right-save-left {
        justify-content: flex-start;
    }

    &.fui-btn-save-left,
    &.fui-btn-right-save-left,
    &.fui-btn-center-save-left {
        flex-direction: row-reverse;
    }

    .fui-btn {
        // For conditions - better than classes, and doesn't rely on toggling
        // between none/block. Maybe we don't want the field to be display: block?
        &[data-conditionally-hidden] {
            display: none;
        }
    }
}

// For accessibility when tabbing on the last field, we want to highlight the submit button
// not the back button which is visually first. https://stackoverflow.com/a/1963285
.fui-submit,
.fui-save {
    order: 10;
}

// Fix to ensure that any nested elements don't trigger JS events themselves. We just want
// events to be fired on the outer button (think `<span>` elements inside `<button>`).
.fui-btn * {
    pointer-events: none;
}
