@layer components {
    .ui-box {
        border-radius: var(--box-roundness, 7px);
        border: 1px solid var(--border-color);
        background-color: var(--box-bg, var(--ui-0));
        position: relative;
        overflow: hidden;

        &.dashed {
            border-style: dashed;
            background-color: var(--ui-0);
        }

        hr { border-color: var(--border-color-light); }

        a.default {
            position: absolute;
            top:0;
            left:0;
            bottom: 0;
            right: 0;
            z-index: 1;
        }
    }

    .colored-top-label {
        background: var(--solid-color, #000);
        color: var(--solid-text-color, #FFF);;
        font-size: 11px;
        letter-spacing: 2px;
        text-transform: uppercase;
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        min-height: 32px;
        min-width:80px;
        padding: 0 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: -1px;

        &.signal {
            background-color: var(--signal);
            color: var(--signal-contrast);
        }
    }

    .info-block {
            display: grid;
            grid-template-columns: 1fr 3fr 1fr;
            justify-content: center;
            .content {
                text-align: center;
                text-wrap: balance;
                padding: 20px;
            }

        .icon-cloud {
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            i {
                position: absolute;
                font-size: 26px;
                transform: translate(-50%,-50%);
                color: var(--ui-150);
            }
            overflow:hidden;
            i:nth-child(1)  { top: 15%; left: 15%; }
            i:nth-child(2)  { top: 17%; left: 50%; }
            i:nth-child(3)  { top: 22%; left: 80%; }
            i:nth-child(4)  { top: 50%; left: 15%; }
            i:nth-child(5)  { top: 50%; left: 50%; }
            i:nth-child(6)  { top: 50%; left: 85%; }
            i:nth-child(7)  { top: 80%; left: 15%; }
            i:nth-child(8)  { top: 83%; left: 50%; }
            i:nth-child(9)  { top: 78%; left: 80%; }

            &.right {
                transform: scaleX(-1);
                i { transform: translate(-50%,-50%) scaleX(-1)}
            }
        }
    }

    .ui-frame {
        background-color: var(--ui-100);
        border-radius: var(--box-roundness, 7px);
        border: 1px solid var(--border-color);
        &.framed {
            outline: 1px solid var(--ui-150);
            outline-offset: 6px;
            margin-left: 6px;
            margin-right: 6px;
        }
    }

    /* Dark Mode */
    @media (prefers-color-scheme: dark) {
        .ui-frame {
            background-color: var(--bg-color);
        }
    }
}