.container {
    display: inline-flex;
    flex-direction: row;
    cursor: pointer;
    align-items: center;
    position: relative;

    &__disabled {
        cursor: not-allowed;
        opacity: 0.5;
    }

    .errors {
        margin-top: 6px;
    }
}

.container__block {
    display: flex;
    margin-bottom: $gutter;
}

.checkbox {
    display: inline-block;
    background: $color-inputBgLight;
    width: 16px;
    height: 16px;
    border-radius: 4px;
    text-align: center;
    position: relative;
    font-size: 1.5rem;

    .container__disabled & {
        pointer-events: none;
    }

    i {
        opacity: 0;
        transform: scale(0.5);
        transition: 250ms ease;
        transform-origin: center center;
        backface-visibility: hidden;
    }

    &:focus {
        outline: 0;
    }

    &:before {
        display: block;
        width: 100%;
        height: 100%;
        content: '';
        position: absolute;
        top: -1px;
        left: -1px;
        padding: 1px;
        border-radius: 4px;
        transition: 200ms;
        z-index: 1;
    }

    &:focus:before {
        box-shadow: 0 0 0 2px $color-primary;
    }
}

.checked {
    background: $color-inputBgLight;
    @if ($theme == light) {
        background: $color-primary;
    }
    color: white;

    i {
        transform: scale(1);
        opacity: 1;
    }
}

@each $kind, $color in $color-presets {
    .checkbox__#{$kind}.checked {
        background-color: $color;
    }
}

.label {
    padding-left: 5px;
    color: $color-contentText;
}