/* Base */

:root, .dark {
    font-family: sans-serif;

    color-scheme: dark;

    --background-color: #121212;
    --secondary-background-color: #222222;
    --tertiary-background-color: #1a1a1a;

    --font-color: var(--light-font-color);
    --secondary-font-color: var(--secondary-light-font-color);
    --tertiary-font-color: var(--tertiary-light-font-color);

    --light-font-color: #d3d3d3;
    --secondary-light-font-color: #ffffff;
    --tertiary-light-font-color: #bbbbbb;

    --primary-color: #3456ff;
    --primary-color-alt: #674ed7;
    --secondary-color: #ff355d;
    --secondary-color-alt: #c33f8d;

    --accent-color: var(--secondary-color);
    --accent-color-alt: var(--secondary-color-alt);

    --button-color: #444444;
    --button-color-hover: #4f4f4f;
    --button-color-active: #3f3f3f;

    --yellow: #fffb8c;
    --green: #00b755;
    --red: #dc3545;
    --blue: #3456ff;

    --border-color: var(--button-color);
    --border-width: 1px;
    --border-style: solid;
    --border-radius: 0.5rem;
    --border: var(--border-width) var(--border-style) var(--border-color);

    --primary-gradient: linear-gradient(145deg, var(--primary-color),  var(--secondary-color));
    --secondary-gradient: linear-gradient(145deg, var(--primary-color-alt),  var(--secondary-color-alt));

    --body-max-width: 800px;

    --navbar-height: 64px;

    --light-only-display: none;
    --dark-only-display: unset;
}

.light {
    color-scheme: light;

    --background-color: #fafafa;
    --secondary-background-color: #eaeaea;
    --tertiary-background-color: #f2f2f2;

    --font-color: #121212;
    --secondary-font-color: #222222;
    --tertiary-font-color: #000000;

    --accent-color: var(--primary-color);
    --accent-color-alt: var(--primary-color-alt);

    --button-color: #d2d2d2;
    --button-color-hover: #dddddd;
    --button-color-active: #c8c8c8;

    --light-only-display: unset;
    --dark-only-display: none;
}

* {
    transition: background-color 0.2s ease-in-out,
                border-color 0.2s ease-in-out;
}

p, span, a, li, label, h1, h2, h3, h4, h5, h6 {
    transition: color 0.2s ease-in-out;
}

html {
    background-color: var(--background-color);
    color: var(--font-color);
    font-size: 20px;

    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    color: var(--secondary-font-color);
    scroll-margin-top: 4rem;
}

h2 {
    margin-top: 0.25rem;
    margin-bottom: 0.25rem;
}

body {
    line-height: 1.5;
    margin: 0;
    padding: 0;

    padding-left: 1rem;
    padding-right: 1rem;
    max-width: var(--body-max-width);
    margin: 0 auto;
}

hr {
    border: var(--border);
    margin-top: 2rem;
    margin-bottom: 2rem;
}

a {
    color: var(--accent-color);
    text-decoration: none;
}

a:hover {
    color: var(--accent-color-alt);
}

/* Helpers */

.success {
    color: var(--green);
}

/* Buttons */

button, .button {
    font-size: inherit;
    background-color: var(--button-color);
    color: var(--font-color);
    text-decoration: none;
    border: none;
    border-radius: var(--border-radius);
    padding: 0.5rem 0.75rem;
    cursor: pointer;
    touch-action: manipulation;
    transition: background-color 0.1s ease-in-out,
                color 0.1s ease-in-out;
}

button:hover, .button:hover {
    background-color: var(--button-color-hover);
    color: var(--secondary-font-color);
}

button:active, .button:active {
    background-color: var(--button-color-active);
    color: var(--tertiary-font-color);
}

button:disabled, .button:disabled {
    background-color: var(--button-color);
    color: var(--font-color);
    opacity: 0.75;
    cursor: not-allowed;
}

button.primary, .button.primary {
    background: var(--secondary-gradient);
    color: var(--secondary-light-font-color);
}

.button-group {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.button-group > * {
    flex: 1 1 0;
    min-width: 250px;
}

/* Action Buttons */

.alternate-button-contents {
    display: none;
}

.alternate .alternate-button-contents {
    display: unset;
}

.alternate .normal-button-contents {
    display: none;
}

/* Info Buttons */

.info-button, .info-button:hover, .info-button:active {
    background-color: transparent;
    color: inherit;
    cursor: pointer;
    padding: 0;
    margin: 0;
}

/* Form */

input, textarea, select {
    font-family: inherit;
    font-size: inherit;
    color: inherit;
    background-color: var(--secondary-background-color);
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

input[type="checkbox"], input[type="radio"] {
    width: auto;
    margin-right: 0.5rem;
}

.color-input-container {
    background-color: var(--secondary-background-color);
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 0.25rem;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.color-input-container * {
    flex: 1 1 0;
}

input[type="color"] {
    height: 2.5rem;
    padding: 0;
    background-color: transparent;
    border: none;
    min-width: 1.5rem;
}

input[type="color"]::-webkit-color-swatch {
    border-radius: var(--border-radius);
    border: var(--border);
}

input[type="color"]::-moz-color-swatch {
    border-radius: var(--border-radius);
    border: var(--border);
}

textarea {
    resize: none;
}

.input-container {
    margin-bottom: 1rem;
    position: relative;
}

.input-group {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 1rem 1rem 0 1rem;
    margin-bottom: 1rem;
}

.forms {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1rem;
}

.forms .form-container {
    flex: 1 1 0;
    min-width: 250px;
}

/* Header */

header {
    margin: 1rem 0;
    padding: 1rem;
    background-color: var(--secondary-background-color);
    border: var(--border);
    border-radius: var(--border-radius);
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

header h1 {
    margin-top: 0;
    margin-bottom: 0;
    margin-right: auto;
    font-size: 1.5rem;
}

#theme-toggle .icon-dark {
    display: var(--light-only-display);
}

#theme-toggle .icon-light {
    display: var(--dark-only-display);
}

/* Footer */

footer {
    margin: 1rem 0;
    text-align: center;
}

footer hr {
    margin-bottom: 0.5rem;
}

/* Hero */

.hero {
    padding-top: 2.5rem;
    padding-bottom: 3rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--secondary-light-font-color);
    background: var(--primary-gradient);
    border-radius: var(--border-radius);
}

.hero h2 {
    color: inherit;
    font-weight: 600;
}

/* Output */

#output svg {
    box-sizing: border-box;
    width: 100%;
    height: 20rem;
    padding: 1rem;
    background-color: var(--background-color);
    border: var(--border);
    border-radius: var(--border-radius);
    margin-bottom: 1rem;
}

#code-output-container {
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
    white-space: pre-wrap;
    word-break: break-word;
}

#code-output-container.hidden {
    display: none;
}

/* Cards */

.card {
    background-color: var(--secondary-background-color);
    border: var(--border);
    border-radius: var(--border-radius);
    padding: 1rem;
    margin-bottom: 1rem;
}

.card h3 {
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.card p {
    margin: 0;
}

/* Tooltips */

.tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: calc(100% + 0.25rem);
    left: 0;
    right: 0;
    max-width: 15rem;
    padding: 0.5rem;
    background-color: var(--tertiary-background-color);
    border: var(--border);
    border-radius: var(--border-radius);
    transition: opacity 0.2s ease-in-out, visibility 0.2s ease-in-out;
}

.input-container .info-button:hover + .tooltip,
.input-container .info-button:focus + .tooltip,
.input-container .info-button:active + .tooltip {
    visibility: visible;
    opacity: 1;
}

/* Slim Select Style Overrides */

:root {
    --ss-primary-color: var(--border-color);
    --ss-bg-color: var(--secondary-background-color);
    --ss-font-color: var(--font-color);
    --ss-font-placeholder-color: var(--border-color);
    --ss-disabled-color: var(--border-color);
    --ss-border-color: var(--border-color);
    --ss-highlight-color: var(--yellow);
    --ss-success-color: var(--green);
    --ss-error-color: var(--red);
    --ss-focus-color: var(--primary-color);
    --ss-main-height: 2rem;
    --ss-content-height: 24rem;
    --ss-spacing-l: 0.3rem;
    --ss-spacing-m: 0.3rem;
    --ss-spacing-s: 0.5rem;
    --ss-animation-timing: 0.1s;
    --ss-border-radius: var(--border-radius);
}

/* Media Queries */

@media (max-width: 600px) {
    .button-group > * {
        flex: 1 1 100%;
        min-width: unset;
    }

    .forms .form-container {
        flex: 1 1 100%;
        min-width: unset;
    }
}