:root {
    --primary-color: #3285D1;
    --light-font-color: #FFFFFF;
    --dark-font-color: #48546C;
    --gray-color: #757575;
    --gray-ui-color: #44484E;
    --dark-background-color: #252627;
    --disabled-font-color: #5A5A5A;
    --collapsing-section-background: #34363B;
    --toggle-off-color: #A9B4C3;
    --light-background-color: #EDEDED;
    --almost-white-color: #F7F7F7;
    --button-color: #DFE4F5;
    --button-hover-color: #C9D2F2;
    --warning-background-color: #FCD0BE;
    --highlighted-font-color: #4FA7F8;

    --primary-colorize-filter: invert(43%) sepia(86%) saturate(545%) hue-rotate(182deg) brightness(90%) contrast(94%);
    --secondary-colorize-filter: invert(65%) sepia(45%) saturate(372%) hue-rotate(180deg) brightness(98%) contrast(89%);
    --white-colorize-filter: invert(100%);
    --gray-colorize-filter: invert(42%) sepia(8%) saturate(945%) hue-rotate(181deg) brightness(91%) contrast(91%);

    --default-font-family: Inter;
    --default-font-size: 14px;
    --default-font-weight: 500;

    --primary-hover-color: #6f9ae6;
    --secondary-hover-color: #EDEDED;
    --gray-ui-hover-color: #5D6168;
    --disabled-color: #A9B4C3;
    --disabled-button-color: #D3D3DE;

    --panel-shadow-filter: drop-shadow(0px 0px 8px rgba(0, 0, 0, 0.15));

    --button-hover-transition: background-color 0.15s linear, color 0.15s linear;

    --loading-overlay-content-base-size: calc(min(15vw, 5vh));
}

html,
div,
button,
input,
select,
option {
    font-family: var(--default-font-family);
    font-size: var(--default-font-size);
    font-weight: var(--default-font-weight);
}

html {
    color: var(--light-font-color);
    overflow: hidden;
}

body {
    margin: 0px;
}

div {
    user-select: none;
}

@font-face {
    font-family: Inter;
    font-weight: 500;
    src: url("assets/fonts/Inter-Medium.woff2");
}

#canvas-container {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    z-index: -10;
}

#powered-by {
    pointer-events: none;
    display: flex;
    flex-direction: column;
    justify-content: stretch;
    align-items: stretch;
    color: white;
    background-color: var(--gray-ui-color);
    border-radius: 12px;
    padding: 12px;
    gap: 10px;
}

#powered-by>div {
    font-size: 18px;
}

#powered-by img {
    height: 28px;
}

.hideable {
    visibility: visible;
    opacity: 1;
    transition: visibility 0.2s linear, opacity 0.2s linear;
}

.hideable.hidden {
    visibility: hidden;
    opacity: 0;
}

#loading-overlay {
    user-select: none;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    margin: 0px;
    padding: 0px;
    z-index: 1;
    background-color: var(--dark-background-color);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: calc(var(--loading-overlay-content-base-size) * 0.5);
}

#fullscreen-dialog {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    color: white;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 10;
}

#fullscreen-dialog>div {
    filter: var(--panel-shadow-filter);
}

.fullscreen-dialog-button {
    min-width: 150px;
    font-size: 20px;
    padding: 6px 12px;
}


#loading-overlay>img {
    height: var(--loading-overlay-content-base-size)
}

#loading-overlay>div {
    color: var(--highlighted-font-color);
    font-size: calc(var(--loading-overlay-content-base-size) * 0.9);
}

#loading-indicator {
    pointer-events: none;
    position: absolute;
    bottom: 132px;
    left: 50%;
    gap: 12px;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    filter: drop-shadow(0px 0px 5px var(--button-hover-color));
    color: var(--primary-color);
}

#loading-indicator>div {
    font-size: 30px;
}

.horizontal-separator {
    width: 100%;
    height: 2px;
    flex-grow: 0;
    flex-shrink: 0;
    background-color: var(--gray-ui-color);
    border-radius: 2px;
    margin: 8px 0px;
}

.styled-button,
.collapsing-section>.title {
    border: none;
    border-radius: 12px;
    width: 100%;
    height: 40px;
    padding: 0px 20px;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    font-size: 14px;
    background-color: var(--primary-color);
    transition: var(--button-hover-transition);
    color: var(--light-font-color);
}

.styled-button:not(:disabled):hover {
    background-color: var(--primary-hover-color);
}

.styled-button:not(:disabled),
.collapsing-section>.title:not(:disabled) {
    cursor: pointer;
}

.styled-button:disabled {
    background-color: var(--dark-font-color);
    color: var(--gray-color);
}

.styled-button.gray,
.collapsing-section>.title {
    justify-content: flex-start;
    background-color: var(--gray-ui-color);
}

.styled-button.gray:not(:disabled):hover,
.collapsing-section>.title:not(:disabled):hover {
    background-color: var(--gray-ui-hover-color);
}

.panel {
    position: absolute;
    border-radius: 12px;
    background-color: var(--dark-background-color);
    padding: 12px;
    margin: 8px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    overflow: auto;
}

.collapsing-section {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.collapsing-section:not(.collapsed)>.title {
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
}

.collapsing-section>.title:disabled {
    color: var(--gray-color);
}

.collapsing-section>.title {
    position: relative;
}

.collapsing-section>.title::after {
    content: "";
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translate(-50%, -50%) rotate(180deg);
    border-top-width: 8px;
    border-top-style: solid;
    border-top-color: var(--light-font-color);
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
}

.collapsing-section>.title:disabled::after {
    border-top-color: var(--gray-color);
}

.collapsing-section.collapsed>.title::after {
    transform: translate(-50%, -50%) rotate(0deg);
}

.inner-panel {
    border-radius: 12px;
}

.inner-panel,
.collapsing-section>.content {
    background-color: var(--collapsing-section-background);
    padding: 10px;

    width: 100%;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
}

.collapsing-section>.content {
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}

.collapsing-section.collapsed>.content {
    display: none;
}

.toggle-group-grid {
    display: grid;
    gap: 4px;
    margin: 8px 0px;
}

.toggle-button {
    height: 36px;
    color: var(--light-font-color);
    border-width: 2px;
    border-style: solid;
    border-radius: 12px;
    transition: var(--button-hover-transition), border-color 0.15s linear;
}

.toggle-button.selected {
    background-color: var(--primary-color);
    border-color: var(--primary-hover-color);
}

.toggle-button:not(.selected) {
    background-color: var(--gray-ui-color-color);
    border-color: var(--gray-color);
}

.toggle-button:not(:disabled) {
    cursor: pointer;
}

.toggle-button:not(:disabled):hover {
    background-color: var(--primary-hover-color);
}

styled-slider-with-input {
    margin: 12px 0px;
}

.menu-panel {
    max-height: calc(100vh - 20px * 2);
}

#mesh-import-header,
#texture-import-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#mesh-import-header>.styled-button,
#texture-import-header>.styled-button {
    width: 120px;
    height: 34px;
}

#loaded-textures {
    display: grid;
    grid-template-columns: auto auto;
    gap: 0px;
    max-height: 250px;
}

#loaded-textures>div {
    width: 120px;
    display: grid;
    border-radius: 8px;
    grid-template-rows: 120px 25px;
    justify-content: center;
    align-items: center;
    padding: 8px;
}

#loaded-textures>div>canvas,
#loaded-textures>div>img {
    width: 100%;
    border-radius: 8px;
    object-fit: contain;
    justify-self: center;
}

#loaded-textures>div>div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}

#loaded-meshes {
    display: grid;
    grid-auto-rows: 40px;
    max-height: 150px;
}

#loaded-meshes>div {
    align-self: stretch;
    display: flex;
    align-items: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 8px;
    margin-right: 8px;
    border-radius: 8px;
}

#loaded-textures,
#loaded-meshes {
    scrollbar-gutter: stable;
    overflow: auto;
}

#loaded-textures>div:hover,
#loaded-meshes>div:hover {
    background-color: var(--gray-ui-color);
    cursor: pointer;
}

#loaded-textures>div.selected,
#loaded-meshes>div.selected {
    background-color: var(--dark-font-color);
}

.color-picker {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

#side-panels {
    position: absolute;
    top: 0px;
    right: 0px;
    max-height: calc(100vh - 120px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
}

#side-panels>.panel {
    position: initial;
}

@media (max-height: 800px) {
    #mesh-stats-panel {
        display: none;
    }
}