.hero-widget {
    @include shadow-2dp;
    margin-bottom: 16px;

    &__img {
        border-radius: $card-radius $card-radius 0 0;
        background: $card-bg-color;

        img { border-radius: $card-radius $card-radius 0 0 }
    }

    &__text {
        background: $card-bg-color;
        padding: 16px;
        color: $primary-text-color;
        border-radius: 0 0 $card-radius $card-radius;

        a { color: $link-text-color }
    }
}

.endorsements-widget {
    padding-bottom: 8px;
    margin-bottom: 8px;

    h4 {
        padding: 12px 16px;
        color: $section-text-color;
    }

    .account { padding: 8px 16px }
}

.trends-widget h4 { color: $section-text-color }

.placeholder-widget {
    border-radius: 0;
    border: none;
    color: $tips-text-color;
    margin-bottom: 16px;
}

.directory__tag {
    margin-bottom: 16px;

    &>a,
    &>div {
        @include shadow-2dp;
        background: $card-bg-color;
        border-radius: $card-radius;
        padding: 16px;

        &:active,
        &:focus,
        &:hover { background: $card-bg-color }
    }

    h4 {
        color: $primary-text-color;

        .fa { color: $icon-color }

        small { color: $info-text-color }
    }
}

.contact-widget {
    color: $ui-text-color;
    padding: 8px;

    h4 {
        color: $ui-text-color;
        padding: 0 0 8px;
    }

    .account { padding: 8px 0 }

    &>a {
        padding: 8px 0;
        color: $primary-text-color;
    }
}

.box-widget {
    @include shadow-2dp;
    padding: 16px;
    border-radius: $card-radius;
    background: $card-bg-color;
}

.rich-formatting {
    color: $ui-text-color;

    h1, h2, h3, h4, h5, h6 { color: $primary-text-color }

    a { color: $link-text-color }

    li, p { color: $ui-text-color }

    strong { color: $primary-text-color }

    table {
        border-radius: 4px;
        border: 1px solid $border-color;

        thead tr,
        tbody tr {
            color: $ui-text-color;
            border-bottom: 1px solid $border-color;
        } 
    }
}

.table-of-contents {
    background: $bg-color;
    border-radius: 0;

    li {
        ul {
            padding-left: 16px;
            border-bottom: 1px solid $border-color;
        }

        a {
            padding: 16px;
            color: $ui-text-color;
            border-bottom: 1px solid $border-color;
        }
    }
}

.page-header {
    background: $card-bg-color;
    padding: 42px 16px;
    margin: 16px 0;

    h1 {
        color: $primary-text-color;
        margin-bottom: 8px;
    }

    p { color: $ui-text-color }
}

.memoriam-widget,
.page-header {
    @include shadow-4dp;
    border-radius: $card-radius;
}

.accounts-table {
    tbody td { padding: 16px 8px }

    .fa.active,
    .fa.active.passive { color: $icon-color }

    &__count {
        color: $ui-text-color;
    
        small { color: $secondary-text-color }
    }
}

.statuses-grid .detailed-status {
    @include shadow-1dp;
    border-radius: $card-radius;
}