/* stylelint-disable */

@import "../../styles/variables";

.checkbox-new {
    &-input {
        position: absolute;
        opacity: 0;

        &[data-indeterminate] {
            + .checkbox-new-label {
                &::before {
                    background: white;
                    border-color: var(--bluejay);
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 4px;
                    right: 14px;
                    top: 9px;
                    bottom: 8px;
                    background-color: var(--bluejay);
                }
            }
        }

        &:checked {
            + .checkbox-new-label {
                &::before {
                    background: white;
                    border-color: var(--bluejay);
                }

                &::after {
                    content: '';
                    position: absolute;
                    left: 4px;
                    top: 9px;
                    background: var(--bluejay);
                    width: 2px;
                    height: 2px;
                    box-shadow:
                        2px 0 0 var(--bluejay),
                        4px 0 0 var(--bluejay),
                        4px -2px 0 var(--bluejay),
                        4px -4px 0 var(--bluejay),
                        4px -6px 0 var(--bluejay),
                        4px -8px 0 var(--bluejay);
                    transform: rotate(45deg);
                }
            }
        }
    }

    &-label {
        position: relative;
        cursor: pointer;
        padding: 0;

        &::before {
            content: '';
            border-radius: 2px;
            border: 1px solid var(--gray-500);
            margin-right: 10px;
            display: inline-block;
            vertical-align: text-top;
            width: 18px;
            height: 18px;
            background: white;
        }
    }
    
    &-input:disabled + &-label {
        position: relative;
        cursor: not-allowed;
        padding: 0;

        &::before {
            content: '';
            border-radius: 2px;
            border: 1px solid var(--gray-500);
            margin-right: 10px;
            display: inline-block;
            vertical-align: text-top;
            width: 18px;
            height: 18px;
            background: var(--gray-300);
        }
    }
}

/* stylelint-enable */