:root {
    --lumo-font-size: 16px;
    --lumo-font-family: "Inter", sans-serif;
}

button#theme-change {
    background-image: url("data:image/svg+xml,%3C!DOCTYPE svg PUBLIC '-//W3C//DTD SVG 1.1//EN' 'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'%3E%3C!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools --%3E%3Csvg width='800px' height='800px' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'/%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M7 3V0H9V3H7Z' fill='%23000000'/%3E%3Cpath d='M9 13V16H7V13H9Z' fill='%23000000'/%3E%3Cpath d='M11 8C11 9.65685 9.65685 11 8 11C6.34315 11 5 9.65685 5 8C5 6.34315 6.34315 5 8 5C9.65685 5 11 6.34315 11 8Z' fill='%23000000'/%3E%3Cpath d='M0 9H3V7H0V9Z' fill='%23000000'/%3E%3Cpath d='M16 7H13V9H16V7Z' fill='%23000000'/%3E%3Cpath d='M3.75735 5.17157L1.63603 3.05025L3.05025 1.63603L5.17157 3.75735L3.75735 5.17157Z' fill='%23000000'/%3E%3Cpath d='M12.2426 10.8284L14.364 12.9497L12.9497 14.364L10.8284 12.2426L12.2426 10.8284Z' fill='%23000000'/%3E%3Cpath d='M3.05025 14.364L5.17157 12.2426L3.75735 10.8284L1.63603 12.9498L3.05025 14.364Z' fill='%23000000'/%3E%3Cpath d='M12.9497 1.63604L10.8284 3.75736L12.2426 5.17158L14.364 3.05026L12.9497 1.63604Z' fill='%23000000'/%3E%3C/g%3E%3C/svg%3E");
    width: 2rem;
    height: 2rem;
    background-color: transparent;
    border: none;
    background-size: 1.5rem;
    background-repeat: no-repeat;
    background-position: center;
}

body[data-theme="dark"] button#theme-change {
    background-image: url("data:image/svg+xml,%3Csvg width='800' height='800' viewBox='0 0 800 800' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 400.001C0 237.781 96.566 98.115 235.35 35.3515L282.718 82.719C261.76 125.691 250 173.973 250 225.001C250 404.493 395.508 550 575 550C626.03 550 674.31 538.24 717.28 517.285L764.65 564.65C701.885 703.435 562.22 800 400 800C179.086 800 0 620.915 0 400.001Z' fill='white'/%3E%3Cpath d='M575 350.001L450 225.001L575 100.001L700 225.001L575 350.001Z' fill='white'/%3E%3C/svg%3E%0A");
}

body[data-color-theme="blue"] {
    --lumo-primary-color: var(--lumo-color-blue);
    --lumo-accent-color: var(--lumo-color-blue);
    --lumo-tab-accent: var(--lumo-color-blue);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-blue) r g b / 0.75);
}

body[data-color-theme="indigo"] {
    --lumo-primary-color: var(--lumo-color-indigo);
    --lumo-accent-color: var(--lumo-color-indigo);
    --lumo-tab-accent: var(--lumo-color-indigo);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-indigo) r g b / 0.75);
}

body[data-color-theme="purple"] {
    --lumo-primary-color: var(--lumo-color-purple);
    --lumo-accent-color: var(--lumo-color-purple);
    --lumo-tab-accent: var(--lumo-color-purple);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-purple) r g b / 0.75);
}

body[data-color-theme="pink"] {
    --lumo-primary-color: var(--lumo-color-pink);
    --lumo-accent-color: var(--lumo-color-pink);
    --lumo-tab-accent: var(--lumo-color-pink);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-pink) r g b / 0.75);
}

body[data-color-theme="red"] {
    --lumo-primary-color: var(--lumo-color-red);
    --lumo-accent-color: var(--lumo-color-red);
    --lumo-tab-accent: var(--lumo-color-red);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-red) r g b / 0.75);
}

body[data-color-theme="brown"] {
    --lumo-primary-color: var(--lumo-color-brown);
    --lumo-accent-color: var(--lumo-color-brown);
    --lumo-tab-accent: var(--lumo-color-brown);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-brown) r g b / 0.75);
}

body[data-color-theme="orange"] {
    --lumo-primary-color: var(--lumo-color-orange);
    --lumo-accent-color: var(--lumo-color-orange);
    --lumo-tab-accent: var(--lumo-color-orange);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-orange) r g b / 0.75);
}

body[data-color-theme="yellow"] {
    --lumo-primary-color: var(--lumo-color-yellow);
    --lumo-accent-color: var(--lumo-color-yellow);
    --lumo-tab-accent: var(--lumo-color-yellow);
    --lumo-primary-button-text: var(--lumo-text-dark);
    --lumo-secondary-color: rgb(from var(--lumo-color-yellow) r g b / 0.75);
}

body[data-color-theme="green"] {
    --lumo-primary-color: var(--lumo-color-green);
    --lumo-accent-color: var(--lumo-color-green);
    --lumo-tab-accent: var(--lumo-color-green);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-green) r g b / 0.75);
}

body[data-color-theme="darkgreen"] {
    --lumo-primary-color: var(--lumo-color-darkgreen);
    --lumo-accent-color: var(--lumo-color-darkgreen);
    --lumo-tab-accent: var(--lumo-color-darkgreen);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-darkgreen) r g b / 0.75);
}

body[data-color-theme="cyan"] {
    --lumo-primary-color: var(--lumo-color-cyan);
    --lumo-accent-color: var(--lumo-color-cyan);
    --lumo-tab-accent: var(--lumo-color-cyan);
    --lumo-primary-button-text: var(--lumo-text-dark);
    --lumo-secondary-color: rgb(from var(--lumo-color-cyan) r g b / 0.75);
}

body[data-color-theme="teal"] {
    --lumo-primary-color: var(--lumo-color-teal);
    --lumo-accent-color: var(--lumo-color-teal);
    --lumo-tab-accent: var(--lumo-color-teal);
    --lumo-primary-button-text: var(--lumo-text-dark);
    --lumo-secondary-color: rgb(from var(--lumo-color-teal) r g b / 0.75);
}

body[data-color-theme="graphite"] {
    --lumo-primary-color: var(--lumo-color-graphite);
    --lumo-accent-color: var(--lumo-color-graphite);
    --lumo-tab-accent: var(--lumo-color-graphite);
    --lumo-primary-button-text: var(--lumo-text-light);
    --lumo-secondary-color: rgb(from var(--lumo-color-graphite) r g b / 0.75);
}

.logo-light {
    display: none;
}

body[data-theme="dark"] .logo-dark {
    display: none;
}

body[data-theme="dark"] .logo-light {
    display: inline-block;
}

pre>code {
    padding: 0 !important;
    background-color: #16191D !important;
    color: #ABB2BF;
}

pre {
    padding: 1rem !important;
    background-color: #16191D !important;
}

.component-presentation {
    padding: 0 !important;
}

.component-presentation>pre {
    margin: 0 !important;
    border-radius: 0 !important;
}

.component-presentation .component-preview {
    padding: 1rem;
}

.component-presentation .component-preview>*:only-child {
    margin: 0 !important;
}

.component-presentation .component-preview>header {
    height: var(--lumo-header-height);
    z-index: 1 !important;
}

.component-presentation .component-preview>header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.component-presentation .component-preview header nav button[aria-label="close"] {
    display: none;
    position: absolute;
    top: 1.25rem;
    right: 0.65rem;
    background-image: var(--lumo-close-icon);
}

.color-box-preview {
    width: 100%;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-block: 0.5rem;
}

.color-box {
    width: 3rem;
    height: 3rem;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 0.75rem;
}

.color-box:hover {
    outline: 2px solid var(--lumo-accent-color);
    outline-offset: 2px;
}

.color-box.blue {
    background-color: var(--lumo-color-blue) !important;
}

.color-box.indigo {
    background-color: var(--lumo-color-indigo) !important;
}

.color-box.purple {
    background-color: var(--lumo-color-purple) !important;
}

.color-box.pink {
    background-color: var(--lumo-color-pink) !important;
}

.color-box.red {
    background-color: var(--lumo-color-red) !important;
}

.color-box.brown {
    background-color: var(--lumo-color-brown) !important;
}

.color-box.orange {
    background-color: var(--lumo-color-orange) !important;
}

.color-box.yellow {
    background-color: var(--lumo-color-yellow) !important;
}

.color-box.green {
    background-color: var(--lumo-color-green) !important;
}

.color-box.darkgreen {
    background-color: var(--lumo-color-darkgreen) !important;
}

.color-box.cyan {
    background-color: var(--lumo-color-cyan) !important;
}

.color-box.teal {
    background-color: var(--lumo-color-teal) !important;
}

.color-box.graphite {
    background-color: var(--lumo-color-graphite) !important;
}