.comment-attributes {
    background: #FCFCFC;
    padding: 20px;
    border-radius: $border-radius;
    margin-bottom: 15px;

    .comment-attribute {
        margin-bottom: 15px;
        padding: 20px;
    }

    .rating-slider {
        background: #D5D5D5;
        height: 6px;
        margin: 10px 0;
        position: relative;

        &:before {
            content: attr(data-rate-title);
            position: absolute;
            left: 50%;
            top: 12px;
            transform: translateX(-50%);
            color: #9ba4ab;
            font-size: 11px;
        }

        .slider-step {
            height: 12px;
            width: 12px;
            background: #D5D5D5;
            border: 2px solid #ffffff;
            display: inline-block;
            border-radius: 50%;
            position: absolute;
            top: -3px;
            cursor: pointer;

            &.active {
                background: $primary;
            }
        }

        .slider-step-1 {
            left: -6px;
        }

        .slider-step-2 {
            left: calc(25% - 6px);
        }

        .slider-step-3 {
            left: calc(50% - 6px);
        }

        .slider-step-4 {
            left: calc(75% - 6px);
        }

        .slider-step-5 {
            left: calc(100% - 6px);
        }

        .slider-base {
            position: absolute;
            height: 6px;
            background: $primary;
            top: 0;
            left: 0;
            width: 50%;
            transition: all 400ms;
        }

        .slider-handle {
            display: inline-block;
            width: 20px;
            height: 20px;
            background: $primary;
            border-radius: 50%;
            left: calc(50% - 12px);
            top: -7px;
            position: absolute;
            transition: all 400ms;
            box-shadow: 0 1px 4px 0 rgba(0, 0, 0, .2);
            cursor: pointer;
        }
    }
}

.comment-attribute-rating {
    background: #FCFCFC;
    margin-bottom: 30px;
    width: 100%;

    @media (min-width: 576px) {
        display: table;

        > div {
            display: table-row;

            > div {
                display: table-cell;
                padding: 10px;

                .rating-general {
                    width: 220px;
                }
            }
        }
    }

    .rating-general {
        background: #D5D5D5;
        height: 4px;
        border-radius: 2px;
        position: relative;

        .rating-value {
            position: absolute;
            top: 0;
            left: 0;
            height: 4px;
            border-radius: 2px;
            background: $primary;
        }
    }

    .value-label {
        color: #9ba4ab;
    }
}