Reconmap/web-client

@import "utilities";
@import "forms";

:root {
    --base-hue: 336;
    --saturation: 50%;
    --value: 55%;
    --distance: 60;
    --distance-analog: calc(var(--distance) / 2);
    --distance-secondary: calc(var(--distance) * -2);
    --distance-complementary: calc(var(--distance) * 3);
    --distance-third: calc(var(--distance) * -5);
    --distance-fourth: calc(var(--distance) * 5);

    --complementary-color: hsl(calc(var(--base-hue) + var(--distance-complementary)),
            var(--saturation),
            var(--value));
    --secondary-color: hsl(calc(var(--base-hue) + var(--distance-secondary)),
            var(--saturation),
            var(--value));
    --analog-color: hsl(calc(var(--base-hue) + var(--distance-analog)),
            var(--saturation),
            var(--value));
    --third-color: hsl(calc(var(--base-hue) + var(--distance-third)),
            var(--saturation),
            var(--value));
    --fourth-color: hsl(calc(var(--base-hue) + var(--distance-fourth)),
            var(--saturation),
            var(--value));

    --color-black: #141820;
    --color-gray-dark: #1b202b;
    --color-gray: #2f3747;
    --color-gray-light: #748094;
    --color-gray-lightest: hsl(240, 1%, 94%);

    --primary-color: #e56e6a;

    --black: var(--color-black);
    --bg-color: var(--color-gray-dark);
    --text-color: var(--color-gray-light);

    --red: var(--analog-color);
    --green: var(--complementary-color);
    --blue: var(--secondary-color);
    --yellow: var(--third-color);
    --purple: var(--fourth-color);
    --gray: var(--text-color);

    --text-colorDark: hsla(var(--base-hue), 3%, 50%, 0.25);

    //spacing
    --space: 0.9rem;
    --space-xs: 0.1rem;
    --space-sm: calc(var(--space) / 2);
    --space-lg: calc(var(--space) * 2);

    --margin: calc(var(--space) / 2);
    --padding: var(--space);
    --paddingBox: calc(var(--space) / 2) var(--space);
    --paddingBadge: calc(var(--space) / 3) calc(var(--space) / 2);
    --marginBox: calc(var(--space) / 2) 0;
    --borderRadius: calc(var(--space) / 3);

    //width
    --sidebarWidth: 200px;
    --sidebarCollapsedWidth: 64px;
    --borderWidth: 2px;

    //icons
    --iconSize: 32px;
    --iconSizeLarge: 48px;

    --fontSizeTitle: 2.1rem;
    --fontSizeSubtitle: 1.75rem;
    --fontSizeHeader: 1.5rem;
    --fontSizeBody: 1rem;
    --fontSizeSmall: 0.85rem;
    --fontSizeXsmall: 0.75rem;
    --fontBold: 700;
    --transitionTime: 0.2s ease-out;
}

* {
    box-sizing: border-box;
}

body {
    color: var(--text-color);
    background-color: var(--bg-color);
    margin: 0;
}

a {
    color: var(--text-color);
}

main {
    display: grid !important;
    transition: grid-template-columns 0.2s;
    grid-template-columns: var(--sidebarWidth) 1fr;

    &.collapsed {
        grid-template-columns: var(--sidebarCollapsedWidth) 1fr;
    }
}

#content {
    padding: var(--padding);
}

div form+aside {
    border-radius: var(--borderRadius);

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--primary-color);
    }
}

label,
small {
    font-size: var(--fontSizeSmall);
    color: var(--text-color);
}

p a {
    border-bottom: var(--borderWidth) dotted var(--primary-color);

    &:hover {
        border-bottom-color: var(--primary-colorLight);
    }
}

h1 {
    font-size: var(--fontSizeTitle);
}

h2 {
    display: flex;
    align-items: center;
}

h3 {
    display: flex;
    align-items: center;
}

h4 {
    display: flex;
    align-items: center;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--primary-color);

    div {
        margin-left: auto;
    }

    label {
        margin-right: calc(var(--padding) / 2);
    }
}

.heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: calc(var(--padding) / 2);

    label {
        margin-right: calc(var(--padding) / 2);
    }
}

section {
    padding-bottom: var(--padding);
    margin: var(--padding) 0;

    h2 {
        margin-right: auto;
    }
}

a,
span,
input,
figure,
h2,
h3,
h4 {
    svg {
        width: 24px;
        height: 24px;
        padding: 0;
        flex-shrink: 0;
    }
}

figure svg {
    margin: 0;
}

dl {
    dt {
        font-weight: 500;
        font-size: var(--fontSizeSmall);
        margin-bottom: var(--space-sm);
        margin-top: 10px;
        padding-bottom: var(--space-sm);
        border-bottom: var(--borderWidth) solid var(--black);
    }

    dd {
        margin-left: 20px;
    }
}

.message__container {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-weight: var(--fontBold);
    opacity: .4;
    gap: var(--padding);
    color: var(--text-color);
}

td svg {
    max-width: 32px;
}

details {
    border: 1px solid var(--text-colorDark);
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.05);
    box-shadow: 2px 2px black;
    padding: 10px;

    summary {
        font-weight: bold;
        font-size: large;
    }
}

details[open] summary {
    margin-bottom: 10px;
}

.full-width {
    width: 100%;
}