.matching-component {

    ul {
        border-top: 1px solid @item-text-color;
        border-bottom: 1px solid @item-text-color;
    }

    .matching-item {
        padding-bottom: @item-padding-bottom;
    }

    .matching-item-title {
        margin-bottom: @item-margin-bottom;
    }

    .matching-select-container {
        position: relative;
        background-color: @item-color;

        &.error {
            /* outline doesn't work for this in Firefox (see #1682) */
            box-shadow: 0 0 0 1px @validation-error;
        }

    }

    .matching-select-state {
        position: absolute;
        width: @icon-size;
        height: @icon-size;
        top: 50%;
        margin-top: -(@icon-size/2);
        right: 10px;
        background: none;

        .dir-rtl & {
            right: inherit;
            left: 10px;
        }

        .matching-select-icon {
            color: @item-text-color;
        }

        .matching-correct-icon {
            color: @validation-success;
            display: none;
        }

        .matching-incorrect-icon {
            color: @validation-error;
            display: none;
        }

    }

    .matching-widget {

        &.submitted {
            .matching-select {
                cursor: default
            }
            .matching-select-container {
                background-color: @item-color-disabled;
            }

            .matching-select-state {
                z-index: 1;
            }
        }

        &.show-user-answer {

            .matching-select-icon {
                display: none;
            }
            .incorrect {
                .matching-incorrect-icon {
                    display: block;
                }
            }
            .correct {
                .matching-correct-icon {
                    display: block;
                }
            }
        }

        &.show-correct-answer {

            .matching-select-icon {
                display: none;
            }
            .incorrect .matching-correct-icon,
            .correct .matching-correct-icon {
                display: block;
            }
        }

    }

}

.no-touch {
    .matching-select-container {
        &:hover {
            color: @button-text-color-hover;
            background-color: @item-color-hover;
        }
    }
}