/* NAVBAR */

.navbar {
    --button-svg-size: 20px;
    padding-inline: 4.6px;
    border-radius: 0.35rem;
    background-color: rgba(255,255,255,0.035);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    height: 50px;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    column-gap: 5px;
    z-index: 555;
}

.navbar-inactive {
    pointer-events: none;
}

/* NAVBAR DIVIDER */

.navbar-divider {
    border: 0;
    height: 75%;
    border-left: 1px solid rgba(255,255,255,0.1);
}

/* NAVBAR BUTTON */

.navbar-button {
    width: 40px;
    height: 40px;
    border: 0;
    background-color: rgba(255,255,255,0.06);
    border-radius: 0.2rem;
    border-top: 1px solid rgba(255,255,255,0.04);
    border-bottom: 1px solid rgba(255,255,255,0.01);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.navbar-button-svg {
    color: white;
    width: var(--button-svg-size);
    height: var(--button-svg-size);
    transition: transform 300ms, color 300ms;
}

.navbar-button-svg-second {
    color: rgb(255, 255, 255);
    width: var(--button-svg-size);
    height: var(--button-svg-size);
    display: none;
}

.navbar-button:hover {
    background-color: rgba(255,255,255,0.1);
}

.navbar-button:active {
    background-color: rgba(255,255,255,0.08);
}

/* ADD DIARY BUTTON JS */

.add-diary-button-js {
    background-color: rgba(255,255,255,0.08);
}

.add-diary-button-js > .navbar-button-svg {
    transform: rotateZ(45deg);
    color: red;
}

/* LOCK BUTTON JS */

.lock-button-js > .navbar-button-svg {
    display: none;
}

.lock-button-js > .navbar-button-svg-second {
    display: block;
}

/* DISABLED */

.navbar-button:disabled {
    border-top: 1px solid rgba(255,255,255,0.02);
    background-color: rgba(255,255,255,0.03);
    cursor: default;
}

.navbar-button:disabled:hover {
    background-color: rgba(255,255,255,0.03);
}

.navbar-button:disabled > .navbar-button-svg {
    color: rgb(100,100,100);
}