@use 'fn';

.givewp-layouts {
    &-header {
        width: 100%;
        border-top-left-radius: 0.5rem;
        border-top-right-radius: 0.5rem;
        box-shadow: var(--givewp-shadow-xs);
        background-color: var(--givewp-primary-color);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: var(--givewp-spacing-6);
        padding: var(--givewp-spacing-6);
        color: #fff;
        text-align: center;

        @media screen and (min-width: $desktopMinWidth) {
            padding: var(--givewp-spacing-10) var(--givewp-spacing-20);
        }

        + .givewp-layouts-form {
            border-top-right-radius: 0;
            border-top-left-radius: 0;
        }
    }

    &-headerTitle h2, &-headerDescription {
        color: var(--givewp-shades-white);
    }
}

.givewp-form-secure-badge {
    display: flex;
    gap: var(--givewp-spacing-2);
    align-items: center;
    width: fit-content;
    padding: var(--givewp-spacing-1) var(--givewp-spacing-4);
    border-radius: var(--givewp-rounded-full);
    background-color: var(--givewp-shades-white);
    color: var(--givewp-grey-900);
    font-size: 0.875rem;
    font-weight: 500;
    line-height: 1.43;
}

.givewp-design-settings--image-style {
    &__above {
        .givewp-layouts-header {
            @supports (background-color: color-mix(in lab, var(--givewp-primary-color) 15%, white)) {
                background-color: color-mix(in lab, var(--givewp-primary-color) 15%, white);
            }
        }
    }

    &__center {
        .givewp-layouts-goal {
            margin-top: 320px;
            position: relative;
            border-radius: 0;
        }

        .givewp-layouts-header {
            @supports (background-color: color-mix(in lab, var(--givewp-primary-color) 15%, white)) {
                background-color: color-mix(in lab, var(--givewp-primary-color) 15%, white);
            }
        }
    }
}