.disabled-fields {
    input,
    select,
    textarea,
    [contenteditable],
    input&,
    select&,
    textarea&,
    &[contenteditable] {
        pointer-events: none;
        background-color: var(--gray-200);
        box-shadow: none;
        &[data-wsc-instance="true"] {
            background-color: var(--gray-200) !important;
        }
    }
    /** Apply grey filters */
    input,
    select,
    textarea,
    input&,
    select&,
    textarea&,
    a&.dropdown-item,
    &.dropdown-item > *,
    &.wsc-badge__wrapper,
    .wsc-badge__wrapper,
    &.can-be-disabled,
    .can-be-disabled {
        -webkit-filter: grayscale(100%);
        -moz-filter: grayscale(100%);
        -ms-filter: grayscale(100%);
        -o-filter: grayscale(100%);
        filter: grayscale(100%);
        filter: gray; /* IE 6-9 */
    }
    form {
        cursor: not-allowed;
    }
    input[type="checkbox"] {
        overflow: hidden;
        cursor: not-allowed;
        &:before {
            content: '';
            display: block;
            width: 100%;
            height: 20px;
            background-color: rgba(0,0,0,.3);
        }
    }
    input[type="checkbox"]:checked,
    input[type="radio"]:checked {
        background-color: var(--gray-200);
    }
    label[for],
    input + label,
    label:has(input, select, textarea) {
        pointer-events: none;
    }
    [type="submit"] {
        pointer-events: none;
        background-color: var(--gray-700);
        border-color: var(--gray-700);
    }
    [contenteditable] {
        background-color: var(--gray-200);
        padding: 10px;
        color: var(--gray-700);
    }
    &.can-be-disabled,
    .can-be-disabled {
        /** Only when clicked disable the pointer-events. This allows us to show the tooltip */
        &:active {
            pointer-events: none;
        }
        color: #c8ced3;
    }
    .white-inputs {
        [contenteditable="true"],
        .form-control {
            background-color: var(--gray-200);
        }
    }
    &.btn {
        cursor: auto !important;
    }
}
a.disabled-fields {
    cursor: auto !important;
}
.dropdown-item.disabled-fields {
    cursor: not-allowed;
}
a.dropdown-item.disabled-fields,
.dropdown-item.disabled-fields > * {
    pointer-events: none;
    opacity: .6;
}

/**
 * Disabled fields for a CKEditor div
 */
.disabled-fields {
    .cke_top,
    .cke_button,
    .cke_button_label {
        cursor: not-allowed;
        pointer-events: none;
    }
    .cke_top,
    .cke_contents {
        background-color: var(--gray-200);
        color: var(--gray-700);
        cursor: not-allowed;
    }
    .cke_button {
        background-color: var(--gray-200);
    }
    .cke_wysiwyg_frame {
        /**
          * We cant gray out the content of an iframe with background-color,
          * so we lower the brightness on the entire frame
          */
        filter: brightness(90%);
    }
}

/**
 * Disabled fields for "WebSpellChecker" fields
 */
.disabled-fields {
    /**
     * Make webSpellChecker unclickable
     */
    &.wsc-badge__wrapper,
    .wsc-badge__wrapper {
        pointer-events: none;
    }
}