/** Main **/

#inv-parent {
    visibility: hidden;

    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);

    width: min-content;

    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

#inv-inner {
    display: none;
    /*display: flex;*/
    flex-direction: column;
    gap: 4px;

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

    padding: 4px;

    background-image: url("../../../img/ui_background.png");
    background-repeat: repeat;
    background-size: 128px;
    image-rendering: pixelated;
    backdrop-filter: blur(16px);
    outline: 2px solid #cccccc;

    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);

    transition: height 0.1s ease;
}

.inv-inner-header {
    display: flex;
    flex-direction: row;

    margin: 4px 0;
}


/** Tabs **/

.inv-inner-tabs {
    flex: 1;

    display: flex;
    flex-direction: row;
    justify-content: end;
    gap: 4px;
}

.inv-inner-tab img {
    width: 16px;
    height: 16px;

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

.inv-inner-tab-current {
    filter: brightness(110%);
    box-shadow: 0 2px #4f4f4f, 0 10px 4px 2px rgba(0, 0, 0, 0.1), inset 0 0 6px white;
    transform: translateY(2px);

    transition: all 0.1s ease;
}

.inv-inner-tab-current:hover {
    filter: brightness(110%);
    box-shadow: 0 2px #4f4f4f, 0 10px 4px 2px rgba(0, 0, 0, 0.1), inset 0 0 6px white;
    transform: translateY(2px);

    transition: all 0.1s ease;
}

.inv-inner-tab-current img {
    filter: saturate(100%);
}


/** Time **/

.inv-inner-time {
    flex: 1;

    display: flex;
    flex-direction: row;
    align-items: center;

    margin-left: 4px;
}

#time-icon-night, #time-icon-sunrise, #time-icon-sunset {
    display: none;
}

#inv-inner-time-text {
    margin: 0 0 0 6px;

    color: white;

    user-select: none;
}

.time-icon {
    width: 2rem;
    height: auto;

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


/** Stats **/

#inv-stats {
    position: absolute;
    top: 50%;
    right: calc(100% + 16px);
    transform: translateY(-50%);

    width: fit-content !important;

    display: flex;
    flex-direction: column;
    gap: 4px;

    padding: 4px;

    background-image: url("../../../img/ui_background.png");
    background-repeat: repeat;
    background-size: 128px;
    image-rendering: pixelated;
    backdrop-filter: blur(16px);
    outline: 2px solid #cccccc;

    box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.25);

    user-select: none;
}

.inv-stat {
    display: flex;
    flex-direction: row;
    gap: 6px;
    align-items: center;
}

#inv-stats img {
    width: 16px;
    height: 16px;

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

#inv-stats p {
    margin: 0;
    color: white;

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