/* :root {
    --icon-size: 2rem;
    --indicator-spacing: calc(var(--icon-size) / 8);
    --border-radius: calc(var(--icon-size) / 4);
    --nav-item-padding: calc(var(--icon-size) / 2);
    --background-color: #495057;
}

.navbar-container {
    display: flex;
    justify-content: center;
    background-color: #343A40;
    border-top-right-radius: var(--border-radius);
    border-top-width: calc(var(--indicator-spacing));
    border-top-color: var(--background-color);
    border-top-style: solid;
    border-top-left-radius: var(--border-radius);
    width: 100%;
    padding: 0 calc(var(--nav-item-padding) * 1.5);
    margin-top: 16px;
}

.list {
    display: flex;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
}

.list a {
    color: #333;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--nav-item-padding);
    outline: 0;
}

.list .text {
    color: white;
    font-size: .8em;
    font-weight: 600;
    opacity: 0;
    transition: 250ms ease-in-out;
    position: absolute;
    bottom: calc(.5 * var(--nav-item-padding));
    transform: translateY(50%);
}

.list .icon {
    position: relative;
    transition: 250ms ease-in-out;
}

.list .icon svg {
    fill: white;
    width: var(--icon-size);
    height: var(--icon-size);
    display: block;
}

.list .active .text {
    pointer-events: all;
    opacity: 1;
    transform: translateY(0);
}

.list .active .icon {
    color: white;
    transform: translateY(calc(-50% - var(--nav-item-padding)));
}

.list {
    position: relative;
}

.indicator {
    position: absolute;
    left: calc(var(--position) * (var(--icon-size) + var(--nav-item-padding) * 2));
    transition: 250ms ease-in-out;
}

.indicator::after,
.indicator::before {
    content: "";
    position: absolute;
    border-radius: 100%;
}

.indicator::after {
    background-color: #495057;
    width: calc(var(--icon-size) * 2);
    height: calc(var(--icon-size) * 2);
    top: calc(-1 * var(--icon-size));
}

.indicator::before {
    background-color: var(--background-color);
    width: calc((var(--icon-size) + var(--indicator-spacing)) * 2);
    height: calc((var(--icon-size) + var(--indicator-spacing)) * 2);
    top: calc(-1 * var(--icon-size) - var(--indicator-spacing));
    left: calc(-1 * var(--indicator-spacing));
}

.corners::before {
    content: "";
    box-sizing: content-box;
    position: absolute;
    width: var(--border-radius);
    height: var(--border-radius);
    background-color: #343A40;
    z-index: 1;
    top: calc(-1 * var(--indicator-spacing));
    left: calc(.2 * var(--indicator-spacing));
    transform: translateX(-100%);
    border-top-right-radius: 100%;
    border-width: calc(var(--indicator-spacing));
    border-color: var(--background-color);
    border-style: solid;
    border-bottom: none;
    border-left: none;
}

.corners::after {
    content: "";
    box-sizing: content-box;
    position: absolute;
    width: var(--border-radius);
    height: var(--border-radius);
    background-color: #343A40;
    z-index: 1;
    top: calc(-1 * var(--indicator-spacing));
    left: calc(var(--icon-size) * 2 + -.2 * var(--indicator-spacing));
    border-top-left-radius: 100%;
    border-width: calc(var(--indicator-spacing));
    border-color: var(--background-color);
    border-style: solid;
    border-bottom: none;
    border-right: none;
} */

.hover\:w-full:hover {
    width: 100%;
}
.group:hover .group-hover\:w-full {
    width: 100%;
}
.group:hover .group-hover\:inline-block {
    display: inline-block;
}
.group:hover .group-hover\:flex-grow {
    flex-grow: 1;
}