@mixin margin($dir: right) {
    margin-#{$dir}: 10px;
}

@mixin select-no-buttons {
    legend {
        border: none;
    }

    .option-wrapper>label {
        display: inline-block;
        margin: 0;

        // aggressively and dumbly override _radiocheck.scss
        padding: 10px !important;

        &:hover {
            background: none;
        }

        .option-label {
            padding: 2px;
        }

        .active {
            display: inline-block;
            margin-left: 0;
            margin-right: 0;

            // force similar sizing for all images
            max-width: 150px;
            max-height: 150px;
            float: none;
            border: 2px solid transparent;
        }

        input {
            width: 1px;
            height: 1px;
            position: relative;
            top: 15px;
            left: 15px;
            z-index: -1;

            &:not([disabled]):not([readonly])~.active:hover {
                border-color: lighten($brand-primary-color, 30%);
            }

            &[disabled],
            &[readonly] {

                &:checked~.active,
                &:checked~.active:hover {
                    border-color: $gray;
                }
            }

            &:checked~.active,
            &:checked~.active:hover {
                border-color: $brand-primary-color;
            }

            &:focus~.active {
                @include focus-shadow;
            }
        }
    }
}

.or-columns-initialized {
    .option-wrapper {
        @include display-flex;

        @include flex-wrap(wrap);

        @include flex-direction(row);
    }

    label,
    .filler {
        @include flex(1 0 30%);
    }

    .filler,
    .filler:hover,
    .filler:focus {
        border: none !important;
        background: transparent !important;
    }
}

.or-appearance-columns-pack {

    // the flexiness is only for appearance=random
    .option-wrapper {
        @include display-flex;

        @include flex-wrap(wrap);

        @include flex-direction(row);
    }

    label {
        display: inline-block;
    }
}

.question.or-appearance-columns,
.question.or-appearance-columns-pack {
    &.or-appearance-no-buttons {
        @include select-no-buttons;
    }
}

@for $total from 1 through 10 {
    .question.or-appearance-columns-#{$total} {
        $margin: 10px;

        &.or-appearance-no-buttons {
            @include select-no-buttons;

            label {
                width: 100% / $total;

                img.active {
                    // Use natural image size, but reduce to fit cell if necessary
                    // Deliberately deviated from ODK Collect scaling-up behavior 
                    // because scaling up images never provides satisfactory results.
                    max-width: 100%;
                    max-height: 100%;
                }
            }
        }

        .option-wrapper {

            // this flexiness is required for appearance=random
            @include flex-direction(row);

            @include flex-wrap(wrap);
        }

        label {
            width: calc(#{100% / $total} - 20px);

            img.active {
                // Use natural image size, but reduce to fit cell if necessary
                // Deliberately deviated from ODK Collect scaling-up behavior 
                // because scaling up images never provides satisfactory results.
                max-width: 100%;
                max-height: 100%;
            }
        }

    }
}



.touch {

    // this ridiculous not:() specificity is required to combat an aggressive rule in _main.scss
    .question:not(.or-appearance-no-buttons):not(.or-appearance-label):not(.or-appearance-list-nolabel):not(.or-appearance-likert) {

        &.or-columns-initialized {
            .option-wrapper>label {
                @include margin(right);
            }
        }
    }

    .or[dir=rtl] {

        // this ridiculous not:() specificity is required to combat an aggressive rule in _main.scss
        .question:not(.or-appearance-no-buttons):not(.or-appearance-label):not(.or-appearance-list-nolabel):not(.or-appearance-likert) {

            &.or-columns-initialized {
                .option-wrapper>label {
                    @include margin(left);

                    margin-right: inherit;
                }
            }
        }
    }
}