@import "widget-bookmarks.css";
@import "widget-calendar.css";
@import "widget-clock.css";
@import "widget-dns-stats.css";
@import "widget-docker-containers.css";
@import "widget-group.css";
@import "widget-markets.css";
@import "widget-monitor.css";
@import "widget-reddit.css";
@import "widget-releases.css";
@import "widget-rss.css";
@import "widget-search.css";
@import "widget-server-stats.css";
@import "widget-twitch.css";
@import "widget-videos.css";
@import "widget-weather.css";

@import "forum-posts.css";

.widget-error-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    margin-bottom: 1.8rem;
    z-index: 1;
}

.widget-error-header::before {
    content: '';
    position: absolute;
    inset: calc(0rem - (var(--widget-content-vertical-padding) / 2)) calc(0rem - (var(--widget-content-horizontal-padding) / 2));
    background: var(--color-negative);
    opacity: 0.05;
    border-radius: var(--border-radius);
    z-index: -1;
}

.widget-error-icon {
    width: 2.4rem;
    height: 2.4rem;
    flex-shrink: 0;
    stroke: var(--color-negative);
    opacity: 0.6;
}

.head-widgets {
    margin-bottom: var(--widget-gap);
}

.widget-content {
    container-type: inline-size;
    container-name: widget;
}

.widget-content:not(.widget-content-frameless) {
    padding: var(--widget-content-padding);
}

.widget-content:not(.widget-content-frameless), .widget-content-frame {
    background: var(--color-widget-background);
    border-radius: var(--border-radius);
    border: 1px solid var(--color-widget-content-border);
    box-shadow: 0px 3px 0px 0px hsl(var(--bghs), calc(var(--scheme) (var(--scheme) var(--bgl)) - 0.5%));
}

.widget-header {
    padding: 0 calc(var(--widget-content-horizontal-padding) + 1px);
    font-size: var(--font-size-h4);
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.widget-beta-icon {
    width: 1.6rem;
    height: 1.6rem;
    flex-shrink: 0;
    transition: transform .45s, opacity .45s, stroke .45s;
    opacity: 0.7;
}

.widget-beta-icon:hover, .widget-header .popover-active > .widget-beta-icon {
    fill: var(--color-text-highlight);
    transform: translateY(-10%) scale(1.3);
    opacity: 1;
}

.widget + .widget {
    margin-top: var(--widget-gap);
}