/* Nav */

button {
    border: none;
    border-radius: none;
    background: none;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 50px;
    height: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    flex-direction: column;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    z-index: 2;
}
.navbar:hover {
    width: 200px;
}
.navbar:hover + .content {
    opacity: 0.5;
}
.navbar button {
    padding: 10px;
    height: 50px;
    width: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.navbar div {
    padding: 10px;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.navbar button div {
    display: grid;
    align-content: center;
    grid-template-columns: 25px 1fr;
    height: 100%;
    justify-self: start;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.navbar button div p {
    text-align: left;
}
.navbar button p, .navbar div p {
    white-space: nowrap;
    visibility: hidden;
    opacity: 0;
    transition: 1s cubic-bezier(0.075, 0.82, 0.165, 1);
    max-height: 0;
    overflow: hidden;
}
.navbar:hover button p, .navbar:hover div p {
    visibility: visible;
    margin-left: 15px;
    opacity: 1;
    max-height: 50px;
}
.navbar:hover button, .navbar:hover div {
    justify-content: start;
    width: 200px;
}
.navbar button:hover {
    background-color: black;
    color: white;
    width: 200px;
}
.navbar button:first-of-type div {
    border: 2px #00000000 solid;
    border-radius: 25px;
}
.navbar:hover > button:first-of-type div {
    border: 2px var(--white) solid;
    border-radius: 25px;
    transition: 2s cubic-bezier(0.075, 0.82, 0.165, 1);
}
.navbar:hover > button:first-of-type div,
.navbar:hover > .nav-active {
    animation: activeiconcolor 7s linear infinite, activetopcolor 7s linear infinite;
    border: 2px var(--black) solid;
}

.nav-bottom {
    margin-top: auto;
}

/*1Mandurah 3Yanchep 4TCL 5Armadale 6Ellenbrook 7Fremantle 8Airport 9Midland*/

.nav-active {
    background-color: black;
    color: var(--white);
    font-weight: bold;
}

@keyframes activeiconcolor {
    0%, 11.9% {
        color: var(--MandurahLine);
    }
    12%, 24.9% {
        color: var(--YanchepLine);
    }
    25%, 36.9% {
        color: var(--Thornlie-CockburnLink);
    }
    37%, 49.9% {
        color: var(--ArmadaleLine);
    }
    50%, 61.9% {
        color: var(--EllenbrookLine);
    }
    62%, 74.9% {
        color: var(--FremantleLine);
    }
    75%, 86.9% {
        color: var(--AirportLine);
    }
    87%, 100% {
        color: var(--MidlandLine);
    }
}

@keyframes activetopcolor {
    0%, 11.9% {
        color: var(--MandurahLine);
        border: 2px var(--MandurahLine) solid;
    }
    12%, 24.9% {
        color: var(--YanchepLine);
        border: 2px var(--YanchepLine) solid;
    }
    25%, 36.9% {
        color: var(--Thornlie-CockburnLink);
        border: 2px var(--Thornlie-CockburnLink) solid;
    }
    37%, 49.9% {
        color: var(--ArmadaleLine);
        border: 2px var(--ArmadaleLine) solid;
    }
    50%, 61.9% {
        color: var(--EllenbrookLine);
        border: 2px var(--EllenbrookLine) solid;
    }
    62%, 74.9% {
        color: var(--FremantleLine);
        border: 2px var(--FremantleLine) solid;
    }
    75%, 86.9% {
        color: var(--AirportLine);
        border: 2px var(--AirportLine) solid;
    }
    87%, 100% {
        color: var(--MidlandLine);
        border: 2px var(--MidlandLine) solid;
    }
}