:root {
    --accent: #FFFFFF;
    --border-width: 2px;
    --border-radius: 55px;
    --font-size: 10px;
}


.toggle {
    position: relative;
    border: solid var(--border-width) var(--accent);
    border-radius: var(--border-radius);
    transition: transform cubic-bezier(0, 0, 0.30, 2) .4s;
    transform-style: preserve-3d;
    height: 43px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #FFFFFF;
}

.toggle>input[type="radio"] {
    display: none;
}

.toggle>#choice1:checked~#flap {
    transform: rotateY(-180deg);
}

.toggle>#choice1:checked~#flap>.content {
    transform: rotateY(-180deg);
}

.toggle>#choice2:checked~#flap {
    transform: rotateY(0deg);
}

.toggle>label {
    width: 30px;
    padding: 2px;
    margin-top: 8px;
    font-size: var(--font-size);
    text-align: center;
    color: var(--accent);
    cursor: pointer;
}

.toggle>label,
.toggle>#flap {
    font-weight: bold;
    text-transform: capitalize;
}

.toggle>#flap {
    position: absolute;
    top: calc( 0px - var(--border-width));
    left: 50%;
    height: 43px;
    width: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: var(--font-size);
    background-color: var(--accent);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    transform-style: preserve-3d;
    transform-origin: left;
    transition: transform cubic-bezier(0.4, 0, 0.2, 1) .5s;
}

.toggle>#flap>.content {
    color: #189ECE;
    transition: transform 0s linear .25s;
    transform-style: preserve-3d;
}

.navbar-transparent>.container>.toggle>#flap>.content {
    color: #000000;
}