/* stylelint-disable no-descending-specificity */
.FormCheckbox {
    --checkbox-base: var(--midnight-650);
    --checkbox-hover: var(--midnight-750);

    display: flex;
    align-items: center;

    .Tooltip {
        display: flex;
    }
    .form-check {
        &-input {
            height: 16px;
            width: 16px;
            margin-top: 0;
            background-color: #fff;
            border: 1px solid var(--checkbox-base);
            border-radius: 2px;
            appearance: none;
            color-adjust: exact;

            &:checked,
            &:indeterminate {
                background-color: var(--checkbox-base);
            }

            &:hover {
                border-color: var(--checkbox-hover);
                cursor: pointer;

                &:checked,
                &:indeterminate {
                    background-color: var(--checkbox-hover);
                }
            }

            &:disabled {
                border-color: var(--form-elements-base-disabled);
                pointer-events: none;

                &:checked {
                    background-color: var(--form-elements-base-disabled);
                }
            }

            &:invalid {
                border-color: var(--form-elements-base-error);

                &:checked {
                    background-color: var(--form-elements-base-error);
                }
            }

            &:checked {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");

                &:disabled {
                    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23D5D9DD' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/></svg>");
                }
            }

            &:indeterminate {
                background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");

                &:disabled {
                    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path fill='none' stroke='%23D5D9DD' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/></svg>");
                }
            }
        }

        &-label {
            @include text-body;

            margin-left: 0.5rem;
            text-transform: none;
            display: flex;
            align-items: center;
            gap: var(--padding-small, 4px);
        }
    }

    &.locked {
        padding: 0;

        .LockGlyphIcon {
            /* Margin to account for slight offset of regular checkbox due to 17.5px margin. */
            margin-right: 1px;
        }

        .form-check-label {
            color: var(--text-primary-disabled);
        }
    }
}
/* stylelint-enable */