.c-vacancy-apply {
    --eds-form-label-color: var(--eds-type-0);
    --eds-form-input-padding-block: var(--eds-spacing-s);
    --eds-form-input-padding-inline: var(--eds-spacing-s);
    --eds-form-input-border: var(--eds-border);
    --eds-form-input-border-color: transparent;
    --eds-form-input-color: var(--eds-type-0);
    --eds-form-input-background: var(--eds-surface-0);
    --eds-form-input-box-shadow-size: 0 3px 6px;
    --eds-form-input-box-shadow-color: hsla(0, 0%, 0%, 0.16);

    color: var(--eds-type-0);

    @media (max-width: calc(62em - 1px)) {
        &.container {
            .cxsFormHolder--wrapper {
                margin-inline: -35px;
                margin-block-start: var(--eds-spacing-2xl);
                padding-inline: 35px;
                padding-block: var(--eds-spacing-l);
            }
        }
    }

    #cxsWrapper {
        display: flex;
        flex-direction: column;
        gap: var(--eds-spacing-s);
    }

    #cxsLanguages {
        position: absolute;
        inset-block-start: -2.25rem;
        inset-inline-start: 0;
        display: flex;
        gap: .5rem;

        @media (max-width: calc(62em - 1px)) {
            inset-inline-start: var(--eds-spacing-s);
        }
    }

    .cxsLanguage {
        padding: var(--eds-spacing-s);
        background: var(--eds-surface-5);
        font-weight: 500;
        line-height: 1;
        cursor: pointer;

        &:hover {
            text-decoration: underline;
        }
    }

    .cxsActiveLanguage {
        background: var(--eds-surface-alt-5);
        cursor: initial;

        &:hover {
            text-decoration: none;
        }
    }

    .cxsPageHeader {
        display: none;
    }

    .cxsSectionHeader {
        margin-block-end: unset;
        margin-block-start: var(--eds-spacing-2xl);
    }

    [cxs="0"] > .cxsSectionHeader {
        margin-block-start: unset;
    }

    [type="text"] {
        &:focus {
            outline: 0;
            box-shadow: var(--eds-form-input-box-shadow-size) var(--eds-form-input-box-shadow-color);
        }
    }

    select {
        width: 100%;
    }

    .cxsFileUpload {
        position: relative;

        iframe {
            position: absolute;
            inset-block-start: 0;
            inset-inline-start: 0;
            inline-size: 100%;
            block-size: 100%;
        }
    }

    .cxsSection {
        display: flex;
        flex-wrap: wrap;
        gap: var(--eds-spacing-s);

        & > * {
            flex-basis: 100%;
        }

        &:has(.cxsFieldType_checkbox) {
            .cxsFieldContainer {
                flex-direction: row;
                flex-wrap: wrap;
            }

            [type=checkbox] {
                order: -1;
            }

            .cxsFieldError {
                flex-basis: 100%;
            }
        }
    }

    .cxsFieldContainer {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: var(--eds-spacing-xs);
    }

    .cxsFieldAfterLabel {
        display: none;
    }

    /* start - checkbox styling */
    [type="checkbox"] {
        position: absolute;
        top: 1px;
        left: 0;
        z-index: 1;
        width: 24px;
        height: 24px;
        margin: 0;
        cursor: pointer;
        opacity: 0;
    }

    .cxsFieldLabel:has(~ [type="checkbox"]) {
        padding-inline-start: 2rem;
        &::before {
            position: absolute;
            content: " ";
            display: block;
            top: 0;
            left: 0;
            width: 24px;
            height: 24px;
            border: var(--eds-vacancies-form-input-border, 3px solid) var(--eds-vacancies-form-input-border-color, var(--eds-border-1));
            background: var(--eds-border-1);
        }

        &::after {
            position: absolute;
            content: " ";
            display: block;
            width: calc(24px - 8px);
            height: calc(24px - 8px);
            top: 3px;
            left: 3px;
            border: 9px solid var(--eds-border-3);
            background: var(--eds-border-3);
            opacity: 0;
            transform: scale(0);
            transition: .2s cubic-bezier(.195,.4,.45,.785);
        }
    }

    .cxsFieldLabel:has(~ [type="checkbox"]:checked) {
        &::after {
            display: block;
            opacity: 1;
            transform: scale(1);
        }
    }

    /* end - checkbox styling */

    .cxsApplyButton {
        align-self: flex-start;
        margin-block-start: var(--eds-spacing-2xl);
    }

    .cxsFieldError {
        color: var(--eds-type-5);
    }

}