@import "../../../../backend/assets/less/core/boot.less";

.control-settings {

    .settings-category {
        padding: 20px;
        background-color: @tertiary-bg;

        h3 {
            margin: 0;
            font-weight: 100;
            color: #293e50;
        }
    }

    .settings-items {
        padding: 20px;
        margin: 0;

        &.row {
            font-size: 0;
        }

        &.row > .settings-item {
            float: none;
            vertical-align: top;
            display: inline-block;
        }

        .settings-item > a {
            display: block;
            position: relative;
            padding-left: 72px;
            padding-top: 10px;
            text-decoration: none;
            margin-bottom: 20px;
            line-height: 150%;
            h5 {
                margin-top: 0;
                color: @text-color;
                font-size: 18px;
                line-height: 150%;
                .text-overflow();
            }

            p {
                color: #777;
                font-size: 12px;
                line-height: 150%;
            }

            .item-icon {
                position: absolute;
                left: 0;
                top: 0;
                background: #f0f0f0;
                .border-radius(999px);
                width: 64px;
                height: 64px;
                display: block;
                text-align: center;
                color: #555;
                i {
                    font-size: 52px;
                    line-height: 64px;
                }
            }

            &:hover {
                h5 { color: @link-hover-color; }
                p { color: @link-hover-color; }
                .item-icon {
                    background: #e0e0e0;
                    color: @link-hover-color;
                }
            }
        }
    }

}