/* ============================================================================
   Form Cut Block Styles
   ========================================================================== */

/* Top Cut Variants - Common Styles */
.form-cut--white-top,
.form-cut--grey-top,
.form-cut--yellow-top,
.form-cut--green-top {
    border-radius: 0 0 0 64px;
    position: relative;
    height: 64px;
    margin-bottom: -64px;
    margin-top: -64px;
    z-index: 2;
}

.form-cut--white-top::after,
.form-cut--grey-top::after,
.form-cut--yellow-top::after,
.form-cut--green-top::after {
    content: "";
    position: absolute;
    inset: 100% auto 0 auto;
    width: 64px;
    height: 64px;
}

/* Bottom Cut Variants - Common Styles */
.form-cut--white-bottom,
.form-cut--grey-bottom,
.form-cut--yellow-bottom,
.form-cut--green-bottom {
    border-radius: 0 64px 0 0;
    position: relative;
    height: 64px;
    margin-top: -64px;
    /* margin-bottom: -128px; */
    /* z-index: 2; */
}

.form-cut--white-bottom::before,
.form-cut--grey-bottom::before,
.form-cut--yellow-bottom::before,
.form-cut--green-bottom::before {
    content: "";
    position: absolute;
    inset: -64px auto 0 0;
    width: 64px;
    height: 64px;
}

/* White Variants */
.form-cut--white-top,
.form-cut--white-bottom {
    background: #fff;
    color: #333333;
}

.form-cut--white-top::after {
    background: radial-gradient(circle at 0 100%, transparent 64px, #fff 64px);
}

.form-cut--white-bottom::before {
    background: radial-gradient(circle at 100% 0, transparent 64px, #fff 64px);
}

/* Grey Variants */
.form-cut--grey-top,
.form-cut--grey-bottom {
    background: #f1f2f2;
    color: #333333;
}

.form-cut--grey-top::after {
    background: radial-gradient(
        circle at 0 100%,
        transparent 64px,
        #f1f2f2 64px
    );
}

.form-cut--grey-bottom::before {
    background: radial-gradient(
        circle at 100% 0,
        transparent 64px,
        #f1f2f2 64px
    );
}

/* Yellow Variants */
.form-cut--yellow-top,
.form-cut--yellow-bottom {
    background: #ffd46e;
    color: #333333;
}

.form-cut--yellow-top::after {
    background: radial-gradient(
        circle at 0 100%,
        transparent 64px,
        #ffd46e 64px
    );
}

.form-cut--yellow-bottom::before {
    background: radial-gradient(
        circle at 100% 0,
        transparent 64px,
        #ffd46e 64px
    );
}

/* Green Variants */
.form-cut--green-top,
.form-cut--green-bottom {
    background: #023421;
    color: #ffffff;
}

.form-cut--green-top::after {
    background: radial-gradient(
        circle at 0 100%,
        transparent 64px,
        #023421 64px
    );
}

.form-cut--green-bottom::before {
    background: radial-gradient(
        circle at 100% 0,
        transparent 64px,
        #023421 64px
    );
}

/* ============================================================================
   Mobile Styles
   ========================================================================== */

@media (max-width: 768px) {
    /* Top Cut Variants - Mobile */
    .form-cut--white-top,
    .form-cut--grey-top,
    .form-cut--yellow-top,
    .form-cut--green-top {
        border-radius: 0 0 0 24px;
        height: 24px;
        margin-top: 0;
        margin-bottom: -24px;
    }

    .form-cut--white-top::after,
    .form-cut--grey-top::after,
    .form-cut--yellow-top::after,
    .form-cut--green-top::after {
        width: 24px;
        height: 24px;
    }

    /* Bottom Cut Variants - Mobile */
    .form-cut--white-bottom,
    .form-cut--grey-bottom,
    .form-cut--yellow-bottom,
    .form-cut--green-bottom {
        border-radius: 0 24px 0 0;
        height: 24px;
        margin-top: -24px;
        margin-bottom: -48px;
    }

    .form-cut--white-bottom::before,
    .form-cut--grey-bottom::before,
    .form-cut--yellow-bottom::before,
    .form-cut--green-bottom::before {
        top: -24px;
        width: 24px;
        height: 24px;
    }

    /* White Variants - Mobile */
    .form-cut--white-top::after {
        background: radial-gradient(
            circle at 0 100%,
            transparent 24px,
            #fff 24px
        );
    }

    .form-cut--white-bottom::before {
        background: radial-gradient(
            circle at 100% 0,
            transparent 24px,
            #fff 24px
        );
    }

    /* Grey Variants - Mobile */
    .form-cut--grey-top::after {
        background: radial-gradient(
            circle at 0 100%,
            transparent 24px,
            #f1f2f2 24px
        );
    }

    .form-cut--grey-bottom::before {
        background: radial-gradient(
            circle at 100% 0,
            transparent 24px,
            #f1f2f2 24px
        );
    }

    /* Yellow Variants - Mobile */
    .form-cut--yellow-top::after {
        background: radial-gradient(
            circle at 0 100%,
            transparent 24px,
            #ffd46e 24px
        );
    }

    .form-cut--yellow-bottom::before {
        background: radial-gradient(
            circle at 100% 0,
            transparent 24px,
            #ffd46e 24px
        );
    }

    /* Green Variants - Mobile */
    .form-cut--green-top::after {
        background: radial-gradient(
            circle at 0 100%,
            transparent 24px,
            #023421 24px
        );
    }

    .form-cut--green-bottom::before {
        background: radial-gradient(
            circle at 100% 0,
            transparent 24px,
            #023421 24px
        );
    }
}