@import '../styles/variables';

.main {
    cursor: pointer;
    &.disabled {
        opacity: 0.5;
        pointer-events: none;
        cursor: default;
    }
}

.checkbox {
    &.small {
        font-size: 12px;
        padding-inline-start: 1.5em;
    }

    &.large {
        font-size: 14px;
        padding-inline-start: 1.8em;
    }

    position: relative;
    user-select: none;
    color: $dark-gray;

    [dir='rtl'] & {
        display: flex;
    }

    &:empty {
        padding-inline-start: 0;
        width: 1.15em;
        height: 1.25em;
        display: inline-block;
    }

    &:before {
        content: '';
        border: 0.1em solid $duda-gray;
        box-shadow: 1px 1px 0 0 rgba(49, 49, 49, 0.18);
        background: #fff;
        border-radius: 0.15em;
        width: 1em;
        height: 1em;
        position: absolute;
        left: 0;
        top: 0.1em;

        [dir='rtl'] & {
            left: auto;
            right: 0;
        }
    }

    &:after {
        display: none;
        content: '';
        position: absolute;
        left: 0.4em;
        top: 0.25em;
        width: 0.185em;
        height: 0.505em;
        border-width: 0 0.185em 0.185em 0;
        border-style: solid;
        border-color: $text-on-light;
        transform: rotate(45deg);

        [dir='rtl'] & {
            right: 0.4em;
            left: auto;
        }
    }

    &.checked:after {
        display: inline-block;
    }

    &.edge:after {
        border-color: $dark-gray;
    }
}

.descriptionLabel {
    composes: descriptionLabel from '../label/Label.module.scss';
}