/*
 * By default, all Likert items are styled to appear joined by applying a border
 * to their `.option-label` children. This "filler" is then used to mask that
 * border on the outer sides of the first and last items. This is most likely to
 * be addressed by work in progress on the new theme.
 */
@mixin likert-filler {
    content: '';
    display: block;
    position: absolute;
    top: -3px;

    //width: calc(50% - 10px);
    width: 50%;
    background-color: $question-bg;
    height: 10px;
}

.or-appearance-likert {
    .option-wrapper {
        @include display-flex;

        @include flex-wrap(nowrap);

        @include flex-direction(row);

        /*
         * Prevent display of "ghost option" when Likert items are defined in an
         * itemset referencing items in a secondary instance
         */
        > .itemset-template {
            display: none;

            /*
             * Treat an itemset's first option the same as an inline item. See
             * note on `likert-filler`.
             */
            & + label .option-label::after,
            & + .itemset-labels + label .option-label::after {
                @include likert-filler;

                left: 0;
            }
        }

        > label {
            @include flex(1);

            @include display-flex;

            @include flex-wrap(nowrap);

            @include flex-direction(column);

            margin: 0;
            float: none;

            // to eliminate a problem when mixing horizontal and likert appearances
            padding-left: 0 !important;
            padding-right: 0;

            // to eliminate a problem when mixing horizontal and likert appearances
            // regular radiobuttons,
            // for alternative radiobutton tweaks see radiocheck.scss
            input[type='radio'],
            input[type='checkbox'] {
                position: relative;
                left: 50%;
                padding: 0;
                margin-left: -10px;
                background-color: white;
                z-index: 10;
            }

            .active {
                margin: 0;
            }

            img.active {
                margin: 0 auto;
            }

            .option-label {
                position: relative;
                text-align: center;
                margin-top: -8.5px;
                padding-top: 15px;
                border-top: 3px solid $radiocheck-unchecked-color;
                font-size: 12px;

                @include font-normal;
            }

            &:first-of-type .option-label::after {
                @include likert-filler;

                left: 0;
            }

            &:last-of-type .option-label::after {
                @include likert-filler;

                right: 0;
            }

            &:hover {
                background-color: transparent;
            }
        }
    }

    &:hover .option-wrapper > label {
        &:first-of-type,
        &:last-of-type {
            .option-label::after {
                background-color: $question-hover-bg;
            }
        }
    }

    &.focus {
        .option-wrapper > label {
            &:first-of-type,
            &:last-of-type {
                .option-label::after {
                    background-color: $question-focus-bg;
                }
            }
        }
    }
}

// corrections for rtl display
.or[dir='rtl'] .or-appearance-likert {
    .option-wrapper {
        > label {
            margin-right: 0;

            &:first-of-type .option-label::after {
                left: auto;
                right: 0;
            }

            &:last-of-type .option-label::after {
                right: auto;
                left: 0;
            }

            input[type='radio'],
            input[type='checkbox'] {
                right: 50%;
                margin-right: -10px;
            }
        }

        .option-label {
            margin-right: 0;
        }
    }
}

// fix colors when background is not default inside repeats
.or-repeat .or-appearance-likert .option-wrapper > label {
    &:first-of-type .option-label::after,
    &:last-of-type .option-label::after,
    input[type='radio'],
    input[type='checkbox'] {
        background-color: $repeat-bg;
    }
}
