:root {
    --darkNavy: #213140;
    --teal1: #66B3FB;
    --teal2: #FFE400;
    --charcoal: #555555;
    --gold: #B6985A;
    --activeShadow: 0 0 10px rgba($teal1, .5);
}


.toggle {
    box-sizing: border-box;
    border: solid 3px var(--teal2);
    border-radius: 32px;
    display: flex;
    input

{
    width: 0;
    height: 0;
    position: absolute;
    left: -9999px;
}

input + label {
    width: 100%;
    cursor: pointer;
    margin: 0;
    padding: 0.75rem;
    box-sizing: border-box;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #FFF;
    color: #707070;
    line-height: normal;
    font-weight: 600;
    text-align: center;
    box-shadow: 0 0 0 rgba(255,255,255,0);
    transition: border-color .15s ease-out, color .25s ease-out, background-color .15s ease-out, box-shadow .15s ease-out;
    /* ADD THESE PROPERTIES TO SWITCH FROM AUTO WIDTH TO FULL WIDTH */
    /*flex: 0 0 50%; display: flex; justify-content: center; align-items: center;*/
    /* ----- */

    &:first-of-type

{
    border-radius: 28px;
}

&:last-of-type {
    border-radius: 28px;
}

}

input:hover + label {
    border-color: var(--darkNavy);
}

input:checked + label {
    background-color: var(--teal2);
    color: #000000;
    box-shadow: var(--activeShadow);
    border-color: var(--teal2);
    z-index: 1;
}

input:focus + label {
    outline: dotted 1px #CCC;
    outline-offset: .45rem;
}

@include breakpoint(800) {
    input + label {
        padding: .75rem .25rem;
        flex: 0 0 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
}