// ==========================================================================
// Forms
// ==========================================================================

.fui-alert-error.fui-alert-bottom-form {
    margin-top: 1rem;
    margin-bottom: 0;
}


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

.fui-btn-wrapper {
    padding: var(--fui-btn-container-padding);
    margin: var(--fui-btn-container-margin);

    .fui-btn {
        margin: var(--fui-btn-margin);
    }
}

.fui-submit {
    color: var(--fui-submit-btn-color);
    background-color: var(--fui-submit-btn-bg-color, var(--fui-primary-color));
    border-color: var(--fui-submit-btn-border-color, var(--fui-primary-color));

    &.fui-loading::after {
        border-bottom-color: var(--fui-submit-btn-spinner-color);
        border-left-color: var(--fui-submit-btn-spinner-color);
    }

    &:hover,
    &:focus,
    &:active {
        color: var(--fui-submit-btn-color-hover);
        background-color: var(--fui-submit-btn-bg-color-hover, var(--fui-primary-color-hover));
        border-color: var(--fui-submit-btn-border-color-hover, var(--fui-primary-color-hover));
    }

    &:focus,
    &:active {
        box-shadow: var(--fui-submit-btn-box-shadow-focus, var(--fui-focus-shadow));
    }
}


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

.fui-row {
    &:not(.fui-row-empty):not(:last-child) {
        margin-bottom: var(--fui-field-gutter);
    }
}


// ==========================================================================
// Forms - Titles
// ==========================================================================

.fui-title {
    padding: 0;
    margin: var(--fui-title-margin);
    font-size: var(--fui-title-font-size);
    font-weight: var(--fui-title-font-weight);
}

.fui-page-title {
    padding: 0;
    margin: var(--fui-page-title-margin);
    font-size: var(--fui-page-title-font-size);
    font-weight: var(--fui-page-title-font-weight);
}


// ==========================================================================
// Forms - Page Tabs
// ==========================================================================

.fui-tabs {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: var(--fui-tabs-margin-bottom);
    font-size: var(--fui-tabs-font-size);
    border-bottom: var(--fui-tabs-border-bottom, 1px solid var(--fui-border-color));
}

.fui-tab {
    color: var(--fui-tab-color, var(--fui-gray-500));
    padding: var(--fui-tab-padding);
    margin-bottom: var(--fui-tab-margin-bottom);
    border: var(--fui-tab-border);

    a {
        color: inherit;
        text-decoration: none;
    }

    // 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-tab-active {
    font-weight: var(--fui-tab-active-font-weight);
    color: var(--fui-tab-active-color, var(--fui-gray-700));
    background-color: var(--fui-tab-active-bg-color);
    border-color: var(--fui-tab-active-border-color, var(--fui-border-color));
    border-bottom-color: var(--fui-tab-active-border-bottom-color);
    border-radius: var(--fui-tab-active-border-radius, var(--fui-border-radius) var(--fui-border-radius) 0 0);
}

.fui-tab-error {
    color: var(--fui-tab-error-color, var(--fui-error));
}


// ==========================================================================
// Forms - Progress
// ==========================================================================

.fui-progress {
    display: flex;
    height: var(--fui-progress-height);
    overflow: hidden;
    font-size: var(--fui-progress-font-size);
    font-weight: var(--fui-progress-font-weight);
    color: var(--fui-progress-color);
    border-radius: var(--fui-progress-border-radius, var(--fui-border-radius));
    background-color: var(--fui-progress-bg-color, var(--fui-gray-200));

    .fui-progress-start & {
        margin-bottom: 1rem;
    }

    .fui-progress-end & {
        margin-top: 1rem;
    }
}

.fui-progress-bar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    background-color: var(--fui-progress-bar-bg-color, var(--fui-primary-color));
    transition: var(--fui-progress-bar-transition);
}
