@import "../variables";

$icon-width: 76px;
$icon-top-compensation: 4px;
$item-top-offset: $offset_main * 5;
$item-left-offset: $offset_main * 7;
$item-subtle-min-height: 40px;

.Dashboard {
    padding-bottom: $offset_main * 2;
}

.Dashboard-section {
    & + & {
        border-top: $border_main;
        margin-top: $offset_main * 5;
        padding-top: $offset_main * 3;
    }
}

.Dashboard-list {
    margin-left: -$item-left-offset;
    margin-top: -$item-top-offset + ($offset-main * 2.5);

    &-vertical {

        //  align a dashboard icon vertical with a title
        margin-left: -8px;
        margin-top: 0;
    }
}

.Dashboard-list-item {
    display: inline-block;
    padding-left: $item-left-offset;
    padding-top: $item-top-offset;
    vertical-align: top;
    width: (100% / 3);

    .Dashboard-list-vertical & {
        padding-left: 0;
        padding-top: 0;
        width: 100%;
    }

    .Dashboard-list-vertical & + & {
        padding-top: $offset_main * 2.5;
    }
}

.Dashboard-list-item-wrapper {
    padding-left: $icon-width + $offset_main * 2.5;
    position: relative;
}

.Dashboard-list-item-title {
    font-size: $font_size_heading_s;
    line-height: $line_height_heading;

    .Dashboard-list-vertical & {
        margin-bottom: $offset_main * .5;
    }
}

.Dashboard-list-item-subtle {
    display: block;
    margin-top: $offset_main * .5;
    min-height: $item-subtle-min-height;
    vertical-align: top;
}

.Dashboard-list-item-icon {
    color: $color_text_label;
    left: 0;
    position: absolute;
    top: -$icon-top-compensation;
}