/*------------------------------------*\
    CHECK FIELD COMPONENT

    Radio buttons and checkboxes
\*------------------------------------*/
$namespace: ".c-check-field";

#{ $namespace } {

    @include namespace() {
        display: flex;
        flex-direction: row;
        align-items: flex-start;

        // Visually hide the input
        &__input {
            @extend %visually-hidden;
        }

        &__decor {
            display: block;
            width: $check-field-decor-size;
            height: $check-field-decor-size;
            flex-shrink: 0;
            background: color(check, decor);
            border: 1px solid color(base, border);
            border-radius: $border-radius;
            position: relative;
            cursor: pointer;

            &:after {
                content: "";
                speak: none;
                display: block;
                opacity: 0;
                width: 70%;
                height: 70%;
                position: absolute;
                top: 15%;
                left: 15%;
                background: color(check, decor__inner);
                border-radius: #{ $border-radius / 2 };
            }
        }

        &__label {
            padding: $check-field-label-padding;
            cursor: pointer;
        }

        // Radio modifier
        &--radio #{ $namespace }__decor {
            &,
            &:after {
                border-radius: 50%;
            }
        }

        // Checked state
        &__input:checked ~ [class*="decor"] {
            &:after {
                opacity: 1;
            }
        }

        // Focused state
        &__input:focus ~ [class*="decor"] {
            outline: 1px dotted #212121;
            outline: 5px auto -webkit-focus-ring-color;
        }

        // Flow between instances
        & + #{ $namespace } {
            padding-top: $check-field-flow;
        }
    }
}
