/*
 * Fields API / Form Consumer Styles
 */
@import '@givewp/src/Form/LegacyConsumer/resources/css/common';

.give-section.choose-amount > .form-row {
    padding: 20px 30px 0;
}

.give-section.payment > .form-row {
    padding: 0 20px;
    margin-top: 15px;
    display: block;
}

#give-payment-mode-wrap > .form-row:not(:first-of-type) {
    margin-top: 20px;
}

div[data-field-type='checkbox'] label {
    padding: 0 0 0 40px;
}

.give-label {
    font-size: 14px;
    cursor: pointer;
    color: #828382 !important;
}

div[data-field-type='checkbox'] .give-label,
div[data-field-type='radio'] .give-label {
    margin: 0 0 5px;
    position: relative;
    line-height: 1.7;
}

/* Align checkbox with its label */
[data-field-type='html'] + [data-field-type='checkbox'] {
    margin-top: -15px !important;
}

/* Align next element after checkboxes end */
[data-field-type='checkbox'] + *:not([data-field-type='checkbox']) {
    margin-top: 15px !important;
}

/* Fields API: Styles for custom checkbox fields. */
[data-field-type='checkbox'] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    label {
        padding: 0 0 0 32px;
        margin-left: 0;
        display: inline-block;
        position: relative;
        font-size: 14px;
        cursor: pointer;
        color: #828382 !important;
    }
    label::before {
        content: ' ';
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
        width: 20px;
        height: 20px;
        border: 1px solid #b4b9be;
        background-color: #fff;
        box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
    }
    label::after {
        content: ' ';
        position: absolute;
        top: calc(50% - 12px);
        left: 0;
        width: 20px;
        height: 20px;
        background-repeat: no-repeat;
        background-position: center;
        // clip-path: polygon(0 0, 11% 0, 0 100%, 0 55%);
    }
    label.active::after {
        content: ' ';
        background-image: url("data:image/svg+xml,%3Csvg width='15' height='11' viewBox='0 0 15 11' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.73047 10.7812C6.00391 11.0547 6.46875 11.0547 6.74219 10.7812L14.7812 2.74219C15.0547 2.46875 15.0547 2.00391 14.7812 1.73047L13.7969 0.746094C13.5234 0.472656 13.0859 0.472656 12.8125 0.746094L6.25 7.30859L3.16016 4.24609C2.88672 3.97266 2.44922 3.97266 2.17578 4.24609L1.19141 5.23047C0.917969 5.50391 0.917969 5.96875 1.19141 6.24219L5.73047 10.7812Z' fill='%234fa651'/%3E%3C/svg%3E%0A") !important;
    }
}

/* Fields API: Styles for custom radio fields. */
[data-field-type='radio'] {
    label {
        padding: 0 0 0 32px;
        margin-left: 0;
        display: inline-block;
        position: relative;
        font-size: 14px;
        cursor: pointer;
        color: #828382 !important;

        &::before {
            content: ' ';
            position: absolute;
            top: calc(50% - 12px);
            left: 0;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 1px solid #b4b9be;
            background-color: #fff;
            box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
        }

        &::after {
            transform: scale3d(0, 0, 0);
            transition: transform 0.2s ease;
            border-radius: 12px;
            width: 10px;
            height: 10px;
            position: absolute;
            top: calc(50% - 6px);
            left: 6px;
            content: ' ';
            display: block;
            background: #333;
        }

        &.active {
            &::after {
                transform: scale3d(1, 1, 1);
            }
        }
    }
}