/*Custom Check Favorites Style*/
/* Customize the label (the container) */
.cb-checkbox {
    display            : flex;
    position           : relative;
    padding-left       : 35px;
    margin-bottom      : 10px;
    cursor             : pointer;
    font-size          : 22px;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    height             : 17px;
    align-items        : center;

    a {
        font-size  : 11.09px;
        color      : #171717;
        font-family: 'GilroyExtraBold';
        transition : all .3s ease-in-out;

        &:hover {
            text-decoration: underline !important;
        }
    }

    span {
        &.text {
            font-size  : 11.09px;
            color      : #171717;
            font-family: 'GilroyMedium';
        }
    }

    /* Hide the browser's default checkbox */
    input {
        position: absolute;
        opacity : 0;
        cursor  : pointer;
        height  : 0;
        width   : 0;
    }

    /* Create a custom checkbox */
    .checkmark {

        /* Create the checkmark/indicator (hidden when not checked) */
        /* Style the checkmark/indicator */
        &:after {
            left             : 6px;
            top              : 2px;
            width            : 5px;
            height           : 10px;
            border           : solid white;
            border-width     : 0 2px 2px 0;
            -webkit-transform: rotate(45deg);
            -ms-transform    : rotate(45deg);
            transform        : rotate(45deg);
        }
    }

    /* On mouse-over, add a grey background color */
    &:hover {
        input~.checkmark {
            background-color: rgba(0, 0, 0, 0);
        }
    }

    /* When the checkbox is checked, add a blue background */
    input:checked~.checkmark {
        background-color: customColor(secondary);
        border          : 1px solid customColor(secondary);
    }

    /* Show the checkmark when checked */
    input:checked~.checkmark:after {
        display: block;
    }

    &.favorites,
    &.addPhotoCheck {
        width         : auto;
        display       : flex;
        flex-direction: column;
        align-items   : center;

        &:hover {
            opacity: 0.8;

            input~.checkmark {
                background-color: rgba(0, 0, 0, 0);
            }
        }

        input:checked~.checkmark {
            background-color: rgba(0, 0, 0, 0);
            opacity         : 1;
            border          : none;

            &:after {
                color           : customColor(secondary);
            }
        }

        .checkmark {
            width           : 29px;
            height          : 27px;
            position        : relative;
            background-color: rgba(0, 0, 0, 0);
            border          : none;

            &:after {
                content    : "\e907";
                font-size  : 29px;
                font-family: 'iconFont' !important;
                color      : #ffffff;
                transform  : none;
                width      : 29px;
                height     : 27px;
                top        : 0;
                left       : 0;
                display    : block;
                border     : none;
            }
        }

        span {
            &.text {
                display         : flex;
                align-items     : center;
                justify-content : center;
                width           : 52px;
                height          : 24px;
                background-color: rgba(255, 255, 255, 0.29);
                border-radius   : 4px;
                font-family     : 'GilroyExtrabold';
                font-size       : 10.48px;
                color           : #ffffff;
            }
        }
    }

    &.radio {
        .checkmark {
            height          : 19px;
            width           : 19px;
            background-color: rgba($color: #000000, $alpha: 0);
            border-radius   : 100%;
            border          : 2px solid #e0e0e0;
            display         : flex;
            align-items     : center;
            justify-content : center;

            &:after {
                border          : none;
                top             : 0;
                left            : 0;
                width           : 13px;
                height          : 13px;
                transform       : none;
                background-color: customColor(secondary);
                border-radius   : 100%;
                top             : auto;
                left            : auto;
                position        : relative;
            }
        }

        input:checked~.checkmark {
            background-color: rgba($color: #000000, $alpha: 0);
        }
    }
    &.addPhotoCheck{
        .checkmark {
            width           : 27px;
            height          : 27px;

            &:after {
                content    : "\e925";
                font-size  : 27px;
                width      : 27px;
                height     : 27px;
            }
        }
    }
}

/* Create a custom checkbox */
.checkmark {
    position        : absolute;
    top             : 0;
    left            : 0;
    height          : 17px;
    width           : 17px;
    background-color: rgba(0, 0, 0, 0);
    border          : 1px solid #e1e1e1;
}

.checkmark:after {
    content : "";
    position: absolute;
    display : none;
}