@use 'scss/font-family.scss' as *;
@use 'theme/variables.scss' as *;

.ca-checkbox-container {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    /* Required Text Checkbox */
    .required-text-checkbox {
        position: absolute;
        left: -72px;
        font-size: 14px;
        color: $ta-red-3;
        line-height: 18px;
    }

    /* Hide the default checkbox */
    .ca-checkbox {
        visibility: hidden;
        cursor: pointer;
    }

    /* Checkbox input container */
    .ca-checkbox-input-container {
        transition: transform 0.3s ease-in-out;
    }

    &:not(.disabled):not(.disabled-blue):not(.disabled-regular-check) {
        .ca-checkbox-input-container:hover {
            transform: scale(1.2);
            transform-origin: center;
        }
    }

    /* Create a custom checkbox */
    .ca-mark {
        height: 14px;
        width: 14px;
        background-color: $grey-4;
        border-radius: 2px;
        cursor: pointer;

        transition: background-color 100ms cubic-bezier(0.46, 0.03, 0.51, 0.95);

        &.invalid {
            background-color: $ta-red-3 !important;
        }

        &.disabled {
            background-color: $ta-light-blue !important;

            &:hover {
                background-color: $ta-light-blue !important;
            }
        }

        &.down-position {
            top: 3px;
        }
    }

    &:hover .ca-checkbox ~ .ca-mark {
        background-color: $bw5;
    }

    &:hover .ca-checkbox:checked ~ .ca-mark {
        background-color: $ta-blue-9 !important;
    }


    &:hover .ca-checkbox ~ .ca-checkbox-label {
        color: $ta-black;
    }

    .ca-checkbox:checked ~ .ca-mark {
        background-color: $ta-blue-18;
    }

    .ca-checkbox:hover ~ .ca-mark {
        background-color: $bw5 !important;
    }

    .ca-checkbox:checked:hover ~ .ca-mark {
        background-color: $ta-blue-9 !important;
    }

    .ca-checkbox:checked ~ .ca-mark:after {
        display: block;
    }

    &.ca-dark-bg {
        &:hover {
            .ca-checkbox ~ .ca-mark {
                background-color: $bw-9 !important;
            }
            .ca-checkbox:checked ~ .ca-mark {
                background-color: $ta-blue-19 !important;
            }
        }
    }


    .ca-checkbox-svg {
        margin-left: 10px;
        margin-right: 4px;
    }

    .ca-checkbox-label {
        cursor: pointer;
        color: $bw6-2;
        font-size: 14px;
        margin-left: 6px;
        position: relative;
        line-height: 14px;

        &::-moz-selection {
            color: $bw6-2;
            background: rgb(108, 108, 108, 0.2);
        }

        &::selection {
            color: $bw6-2;
            background: rgb(108, 108, 108, 0.2);
        }

        &-required {
            color: $ta-red-3;
        }
    }

    /* Use Carriera ACH */

    .carriera-icon {
        line-height: 10px;
        margin-left: 6px;
        cursor: pointer;
    }

    // -------------------------- Custom Class --------------------------------
    &.disabled {
        .ca-checkbox-disabled {
            height: 14px;
            width: 14px;
            line-height: 15px;

            position: relative;
            bottom: 2px;
            svg {
                path {
                    fill: $white !important;
                }
            }

            &.dark-disabled-icon {
                svg {
                    path {
                        fill: $ta-light-grey-6 !important;
                    }
                }
            }
        }

        .ca-checkbox-label {
            color: $ta-light-grey-2 !important;
            cursor: auto;
        }

        &.disabled-valid {
            svg {
                path {
                    fill: $ta-light-blue !important;
                }
            }

            .ca-checkbox-label {
                font-weight: 500 !important;
                color: $bw6-2 !important;
            }
        }
    }

    &.disabled-blue {
        pointer-events: none !important;

        .ca-checkbox-disabled-blue {
            height: 14px;
            width: 14px;
            line-height: 15px;

            position: relative;
            bottom: 2px;

            svg {
                path {
                    fill: $ta-blue-13 !important;
                }
            }
        }

        .ca-checkbox-label-blue {
            font-weight: 500 !important;
            color: $ta-black !important;
            position: relative;
            bottom: 1px;
        }
    }

    &.disabled-regular-check {
        pointer-events: none !important;

        .ca-checkbox-disabled-regular-check {
            background: $ta-gray-02;
            height: 14px;
            width: 14px;

            svg {
                height: 10px;
                width: 10px;

                path {
                    fill: $bw6-2 !important;
                }
            }
        }

        .ca-checkbox-label-regular-check {
            font-weight: 700 !important;
            color: $ta-black !important;
        }
    }

    &.medium {
        .ca-checkbox-label {
            font-weight: 500 !important;
            color: $bw6-2;
        }
    }

    &.regular {
        label {
            line-height: 17px;
        }

        .ca-checkbox-label {
            font-weight: 400;
            color: $ta-light-grey-2;
            color: $bw6-2;
        }
    }

    &.billing-address {
        margin-bottom: 12px;
        position: relative;
        left: 1px;
        top: 0px;

        &.checked {
            margin-bottom: 22px;
        }
    }

    &.shipper-hours {
        margin-bottom: 10px;
        position: relative;
        left: 6px;
        top: 0px;
    }

    &.bold-12 {
        .ca-checkbox-label {
            font-weight: 700 !important;
            font-size: 12px;
        }
    }

    &.bold-14 {
        .ca-checkbox-label {
            font-weight: 800 !important;
            font-size: 14px;
        }
    }

    &.regular-14 {
        .ca-checkbox-label {
            font-weight: 400 !important;
            font-size: 14px !important;
        }

        &:not(.checked) {
            .ca-checkbox-label {
                color: $ta-light-grey-2 !important;
            }
        }
    }

    &.medium-14 {
        .ca-checkbox-label {
            font-weight: 500 !important;
            font-size: 14px;
        }
    }

    &.label-black {
        .ca-checkbox-label {
            color: $black-2;
        }
    }

    &.text-align-center {
        label {
            align-items: unset;
        }

        .ca-checkbox-label {
            text-align: center;
        }
    }

    &.line-height-18 {
        .ca-checkbox-label {
            line-height: 18px;

            &::before {
                content: '';
                display: block;
                height: 0;
                width: 0;
                margin-top: calc((1 - 1.285) * 0.5em);
            }
        }
    }

    &.dropdown-column {
        .ca-checkbox-label {
            color: $white-2;
        }

        .ca-checkbox:checked ~ .ca-checkbox-label {
            font-weight: 700 !important;
            color: $white-2 !important;
            &.ca-checkbox-label-disabled {
                pointer-events: none !important;
            }
        }

        &:hover .ca-checkbox ~ .ca-checkbox-label {
            color: $white;
        }

        .ca-mark {
            background-color: $grey;

            &.minus::after {
                content: '';
                position: absolute;
                display: none;
                left: 5px;
                top: 2px;
                width: 4px;
                height: 8px;
                border: solid $white-2;
                border-width: 0 2px 0px 0;
                transform: rotate(90deg) !important;
            }
        }

        &.disabled {
            svg-icon {
                position: relative;
                bottom: 1px;
                width: 14px;
                height: 15px;
                line-height: 14px;

                svg {
                    path {
                        fill: $blue-8 !important;
                    }
                }
            }

            .ca-checkbox-label {
                font-weight: 700 !important;
                color: $white !important;
            }
        }

        .ca-checkbox:checked ~ .ca-mark {
            background-color: $blue-8;
        }
    }
}