/** General UI **/

:root {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.hint {
    display: flex;
    align-items: center;
    justify-content: center;

    margin: 0;

    color: white;
    text-align: center;

    user-select: none;
}

.text-left {
    text-align: left;
    justify-content: start;

    padding-left: 2px;
}

.light-hint {
    margin: 0;

    font-size: 12px;
    opacity: 0.8;

    color: white;

    user-select: none;
}

.blur {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    background-color: rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0 64px 32px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(16px);
}

.menu {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 8px;

    background: url("../img/ui_background.png") repeat;
    background-size: 128px;
    image-rendering: pixelated;
    backdrop-filter: blur(16px);
    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);
    border: 2px solid #cccccc;

    color: white;

    user-select: none;
}

.menu p {
    margin: 0;

    filter: drop-shadow(2px 2px 1px rgba(0, 0, 0, 0.4));
}

.menu-in {
    display: flex;
    flex-direction: column;
    gap: 8px;

    padding: 8px;

    background: url("../img/ui_background_dark.png") repeat;
    background-size: 128px;
    image-rendering: pixelated;
    box-shadow: inset 0 0 16px 8px rgba(0, 0, 0, 0.25);
    border: 2px solid #cccccc;
}

.centered {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}


/** Button **/

.button {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;

    padding: 4px 8px;

    background-image: url("../img/ui_background.png");
    background-repeat: repeat;
    background-size: 128px;
    image-rendering: pixelated;
    color: rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
    border: 2px solid #f8f7f2;
    box-shadow: 0 4px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1);

    cursor: pointer;
    user-select: none;

    transition: all 0.15s ease;
}

.button p {
    margin: 0 !important;
}

.button:hover {
    filter: brightness(110%);
    box-shadow: 0 6px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);

    transition: all 0.15s ease;
}

.button:active {
    filter: brightness(110%);
    box-shadow: 0 2px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(2px);

    transition: all 0.1s ease;
}

.button-disabled {
    transform: translateY(4px);

    filter: brightness(1) saturate(0%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);

    opacity: 0.4;

    cursor: default;

    transition: all 0.1s ease;
}

.button-disabled:hover, .button-disabled:active {
    filter: brightness(1) saturate(0%);
    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.4);
    transform: translateY(4px);

    transition: all 0.1s ease;
}

.button-selected {
    filter: brightness(110%);
    box-shadow: 0 2px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1), inset 0 0 6px #a29d9c;
    transform: translateY(2px);

    transition: all 0.1s ease;
}

.button-selected:hover {
    filter: brightness(110%);
    box-shadow: 0 2px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1), inset 0 0 6px white;
    transform: translateY(2px);

    transition: all 0.1s ease;
}

.button-big {
    padding: 24px !important;
}

.button-green {
    background-color: rgba(28, 238, 71, 0.5);
    background-blend-mode: multiply;
    background-size: cover;
}

.button-red {
    background-color: rgba(246, 35, 35, 0.5);
    background-blend-mode: multiply;
    background-size: cover;
}


/** Input **/

.input-wrapper {
    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: center;
}

.input-label {
    text-align: left;
    flex: 1;
}

.input {
    width: 100%;
    box-sizing: border-box;

    padding: 4px 8px;

    outline: none;

    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
    border: 2px solid #cccccc;

    color: white;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);

    font-family: themevck, sans-serif;
    font-size: 18px;
}

.input:hover, .input:focus {
    background-color: rgba(0, 0, 0, 0.2);
}

.input::placeholder {
    text-shadow: none;

    color: rgba(255, 255, 255, 0.4);
}

.input-vector {
    display: flex;
    flex-direction: row;
    gap: 4px;
}

.input-vector .input {
    width: 33.333%;
}


/** Switch **/

.switch-outer {
    height: 1.25rem;
    width: 2.5rem;

    display: flex;
    flex-direction: row;

    padding: 2px;

    background-color: rgb(168, 168, 168);
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.25);
    outline: 1px solid white;

    cursor: pointer;
}

.switch-inner {
    height: 100%;
    width: 50%;

    box-sizing: border-box;

    background-color: white;
    border-bottom: 3px solid #b0b0b0;

    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15), 0 0 8px rgba(0, 0, 0, 0.25), 0 0 4px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.15);

    transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.switch-outer:hover {
    filter: brightness(0.9);
}

.switch-on {
    background-color: #53b041;
}

.switch-on .switch-inner {
    transform: translateX(100%);
}


/** Slider **/

.slider {
    margin-right: 12px;

    -webkit-appearance: none;
    background: transparent;

    cursor: grab;
}

.slider:active {
    cursor: grabbing;
}

.slider::-webkit-slider-runnable-track:root {
    --fill: 0;
}

.slider::-webkit-slider-runnable-track {
    background: linear-gradient(to right, white 0%, white calc(var(--fill) + 2px), rgba(255, 255, 255, 0.35) calc(var(--fill) + 2px), rgba(255, 255, 255, 0.35) 100%);
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);

    height: 4px;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #ffffff;
    box-shadow: inset 0 0 4px rgba(0, 0, 0, 0.15), 0 0 8px rgba(0, 0, 0, 0.25), 0 0 4px rgba(0, 0, 0, 0.25), 0 0 8px rgba(0, 0, 0, 0.15);
    margin-top: -6px;
    height: 16px;
    width: 16px;
    border-bottom: 3px solid #b0b0b0;

    border-radius: 0;

    transition: transform 0.1s ease;
}

.slider:hover::-webkit-slider-thumb {
    transform: scale(1.1);
}


/** Dropdown **/

.dropdown-outer {
    position: relative;

    padding: 8px;

    color: rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
    border: 2px solid #f8f7f2;
    box-shadow: 0 4px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1);

    cursor: pointer;

    transition: all 0.15s ease;
}

.dropdown-outer:hover:not(.dropdown-open) {
    filter: brightness(110%);
    box-shadow: 0 6px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);

    transition: all 0.15s ease;
}

.dropdown-outer:active:not(.dropdown-open) {
    filter: brightness(110%);
    box-shadow: 0 2px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1);
    transform: translateY(2px);

    transition: all 0.1s ease;
}

.dropdown-outer img {
    margin-left: 8px;
    width: 0.85rem;
}

.dropdown-inner {
    position: absolute;
    left: 0;
    top: 100%;
    transform: translateX(-2px);

    display: flex;
    flex-direction: column;

    background-image: url("../img/ui_background.png");
    background-repeat: repeat;
    background-size: 128px;
    image-rendering: pixelated;
    color: rgba(255, 255, 255, 1);
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.25);
    border: 2px solid #f8f7f2;
    box-shadow: 0 4px #a29d9c, 0 10px 4px 2px rgba(0, 0, 0, 0.1);

    z-index: 1;
}

.dropdown-item {
    padding: 8px;

    border-bottom: 1px solid rgba(255, 255, 255, 0.3);

    text-align: left;

    cursor: pointer;
}

.dropdown-item:hover {
    background-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.35);
}


/** Header **/

.ui-header {
    display: flex;
    flex-direction: row;
    gap: 4px;
    justify-content: center;

    padding: 4px;

    background-color: rgba(0, 0, 0, 0.25);
    text-align: center;
}

.ui-header p {
    margin: 0 !important;
}

.ui-header .button {
    margin-bottom: 2px;
}


/** Miscellaneous **/

.separator {
    width: 100%;
    height: 1px;

    background-color: rgba(255, 255, 255);
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25), 0 10px 4px 2px rgba(0, 0, 0, 0.1);
    opacity: 0.9;
}

.separator-vertical {
    width: 1px;

    background-color: rgba(255, 255, 255);
    box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25), 0 10px 4px 2px rgba(0, 0, 0, 0.1);
    opacity: 0.9;
}

#world-creator-seed {
    margin-bottom: 8px;
}