/*noinspection CssUnknownTarget*/
@import '../lumo/lumo.css';
@import "fonts.css";

:root {
    --bs-font-serif: BundesSerif, "Helvetica Neue", helvetica, arial;
    --bs-font-sans-serif: BundesSans, "Helvetica Neue", helvetica, arial;
    --itz-base-1: rgb(205, 230, 231);
    --itz-base-2: rgb(0, 122, 138);
    --itz-gray-1: rgb(221, 223, 224);
    --itz-gray-2: rgb(230, 235, 240);
    --itz-gray-3: rgb(242, 243, 244);
}

body {
    font-family: var(--bs-font-sans-serif), sans-serif;
}

.setting-panel {

    padding: 1rem;
    width: calc(100% - 2rem);
    display: grid;
    grid-template-columns: min-content auto min-content;
    gap: 0.5rem 1rem;
    align-items: center;
    border-radius: 0.5rem;
    background-color: var(--lumo-contrast-10pct);

    .setting-icon {
        grid-row: 1 / span 2;
        grid-column: 1;
        width: 3rem;
        height: 3rem;
    }

    .setting-title {
        grid-row: 1;
        grid-column: 2;
        margin: 0;
        padding: 0;
    }

    .setting-description {
        grid-row: 2;
        grid-column: 2;
        margin: 0;
        padding: 0;
        max-width: 48rem;
    }

    .setting-content {
        grid-row: 1 / span 2;
        grid-column: 3;
    }
}