@import "../new-variables";

.input-checkbox {
    label {
        &.alternative{
            width: max-content;
            letter-spacing: 0.22px;
            text-transform: uppercase;
            color:$light-grey-text-color;
            font-size: $text-size-small;
        }
        display: flex;
        align-items: baseline;
        font-weight: $bold;
        letter-spacing: 0.28px;
        text-transform: uppercase;
        color:$main-color;
        font-size: $text-size-normal-bigger;
        &.rememberme{
            input{
                margin-right:10px;
                margin-left:0px;

            }

            input[type="checkbox"] {
                color: currentColor;
                width: 20px;
                height: 20px;
                border: 1px solid $grey-text-color;
            }
            font-size: $text-size-normal-big;
            color:$grey-text-color;
            letter-spacing: 0.26px;
            text-transform: none;
        }

    }

    input[type="checkbox"] {
        -webkit-appearance: none;
        appearance: none;
        margin: 5px 0 0 5px;
        font: inherit;
        color: currentColor;
        width: 30px;
        height: 30px;
        cursor: pointer;
        border: 1px solid #0d9867;
        background-color: white;
        transform: translateY(-0.075em);
        display: grid;
        place-content: center;
        transition: border-width 0.3s; /* Added transition for border width */
    }

    input[type="checkbox"]:hover {
        border-width: 2px; /* Increased border width on hover */
    }

    input[type="checkbox"]::before {
        content: "";
        width: 0.65em;
        height: 0.65em;
        clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
        transform: scale(0);
        transform-origin: bottom left;
        transition: 120ms transform ease-in-out;
        box-shadow: inset 1em 1em #2BC48A;
        background-color: #2BC48A;
    }

    input[type="checkbox"]:checked::before {
        transform: scale(1);
    }

    input[type="checkbox"]:disabled {
        --form-control-color: var(--form-control-disabled);
        color: var(--form-control-disabled);
        cursor: not-allowed;
        border:1px solid #0d9867; /* Adjusted border color for disabled */
        background-color: #EFF0ED; /* Adjusted background color for disabled */
    }
}