// Radio buttons
//
// Default styles for radio buttons.
// Styling method takes a lot of inspiration from Materialize CSS.
//
// Markup: form-radiobutton.twig
//
// Weight: 5
//
// Styleguide: Forms.RadioButtons

// Checkboxes
//
// Default styles for checkboxes.
// Styling method takes a lot of inspiration from Materialize CSS.
//
// Markup: form-checkbox.twig
//
// Weight: 6
//
// Styleguide: Forms.Checkboxes
input[type='checkbox']
input[type='radio']
    position absolute
    opacity 0
    pointer-events none

    + label
        display inline-block
        position relative
        padding-left 1.5em

        &:before
            content ''
            display inline-block
            position absolute
            top .25em
            left 0
            width 1em
            height @width
            background-color var(--form-input-text-color)
            border 2px solid var(--form-input-radio-border-color)
            box-shadow inset 0 0 0 1em var(--form-input-bg-color) // hide background
            transition box-shadow .3s ease, color .3s linear

    &:checked + label:before
        box-shadow inset 0 0 0 .1em var(--form-input-bg-color)

    &:focus + label
        {outline}

    .js-focus-visible &:focus:not(:focus-visible) + label
        outline 0

input[type='radio']
    + label
        &:before
            border-radius 20em // high value to make it round