.Panels {
    width: 100%;
    --padding: 20px;

    gap: var(--padding);
    box-sizing: border-box;

    &.boxed {
        --padding: 10px;
        background: var(--color-base-faintest-3);
        padding: var(--padding);
        border-radius: var(--dashboard-panels-border-radius);

        & > .Panel {
            border-color: var(--bgColor);
        }
    }

    &.mosaic {
        display: flex;
        flex-wrap: wrap;

        & > .Panel {
            max-width: 100%;
            flex-grow: 1;
        }
    }

    &.column {
        display: flex;
        flex-direction: column;
    }
}

.Panel {
    --padding: 15px;
    --bgColor: var(--color-background);

    background-color: var(--bgColor);

    position: relative;

    display: flex;
    flex-direction: column;
    gap: var(--base-gap);

    border-radius: var(--dashboard-panels-border-radius);
    border: solid var(--color-base-faintest-2) 1px;
    padding: calc(var(--padding) * .95) var(--padding);
    box-sizing: border-box;

    min-width: max(min-content, 50px);

    flex-basis: min-content;

    &.fullWidth {
        flex-basis: 100%;
    }

    &.halfWidth {
        flex-basis: calc(50% - (var(--padding) * 2));
    }

    &.thirdWidth {
        flex-basis: calc(33% - (var(--padding) * 2));
    }

    &.quarterWidth {
        flex-basis: calc(25% - (var(--padding) * 2));
    }

    &.shrink {
        flex-grow: 0 !important;
        flex-shrink: 1;
    }

    &.featured {
        background: var(--color-base-faintest-3);
        border-color: var(--color-base-faintest-3);
    }

    &.transparent {
        background: transparent;
        border-color: transparent !important;
        --padding: 10px;
    }

    &:has(> .title) {
        padding-top: calc(var(--padding) * 1.75);

        & > .title {
            position: absolute;
            top: -1px;
            left: var(--padding);
            font-size: var(--font-size-smaller);
            line-height: 1.6em;
            background-color: var(--color-base-faintest-3);

            border-bottom-left-radius: var(--border-radius);
            border-bottom-right-radius: var(--border-radius);
            padding: 0 8px;
        }
    }

    &:has(:first-child.PropertyList) {
        padding-top: calc(var(--padding) * .8);
    }

    &:has(:last-child.PropertyList) {
        padding-bottom: calc(var(--padding) * .8);
    }

    &:has(> .Image) {
    }
}

.Panels.boxed > .Panel {
    border-radius: var(--dashboard-panels-border-radius-inner);

    & > .title {
        background: var(--color-base-faintest-3);
        color: var(--base-color);
    }
}

.Panels > form:has(.FormInputWithButton) {
    width: 100%;

    > .FormInputWithButton {
        width: 100%;
        --border-radius: var(--dashboard-panels-border-radius-inner);
        --button-border-radius: var(--dashboard-panels-border-radius-inner);
    }
}