:root {
    --sr-main: #161616;
    --sr-background: #FAFBFC;
    --sr-subbackground: #D5D6D7;
    --sr-active: #FFFFFF;
    --sr-focus: #C0AD7E;
    --sr-shadow: #0003;
}
sr-button {
    position: relative;
    display: block;
    border-radius: 100vh;
    background-color: var(--sr-background);
    color: var(--sr-main);
    opacity: 0.8;
    user-select: none;
    -webkit-user-select: none;
    padding: 10px 20px;
    cursor: pointer;
    text-align: center;
    box-shadow: 0 0 0 2px #fff0, 0 0 0 1px #fff0 inset;
    transition: opacity 0.2s, box-shadow 0.2s, background-color 0.2s;
}
sr-button:hover {
    opacity: 1;
    background-color: var(--sr-active);
    box-shadow: 0 0 0 2px var(--sr-active), 
        0 0 0 1px var(--sr-active) inset, 
        0 0 4px var(--sr-subbackground) inset, 
        0 2px 3px var(--sr-shadow);
}
sr-button::before {
    content: "";
    position: absolute;
    left: 5px;
    top: 5px;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    border-radius: 100vh;
    box-shadow: 0 0 0 1px var(--sr-subbackground);
}
sr-button::after {
    content: "";
    position: absolute;
    width: 2px;
    height: 2px;
    left: 20px;
    top: 4px;
    border-radius: 1px;
    background-color: var(--sr-subbackground);
    box-shadow: 0 0 0 3px var(--sr-background);
    transition: box-shadow 0.2s;
}
sr-button:hover:after {
    box-shadow: 0 0 0 3px var(--sr-active);
}

sr-div {
    display: block;
    border-right: 1px dotted var(--sr-main);
    margin: 0 5px;
    opacity: 0.5;
}

sr-nav-item {
    color: var(--sr-main);
    display: block;
    position: relative;
    padding: 10px 25px;
    background-color: var(--sr-background);
    text-align: left;
    cursor: pointer;
    box-shadow: 0 0 0 3px #0000;
    overflow: hidden;
    background-image: linear-gradient(90deg, 
        var(--sr-main) 0% 42%, 
        var(--sr-focus) 42% 58%, 
        var(--sr-background) 58% 100%);
    background-size: 250% 100%;
    background-position-x: -68%;
    transition: box-shadow 0.2s, color 0.2s, background-position-x 0.3s;
    user-select: none;
    -webkit-user-select: none;
}
sr-nav-item * {
    transition: color 0.2s;
}
sr-nav-item:hover {
    box-shadow: 0 0 0 3px var(--sr-focus), 
        0 0 4px var(--sr-shadow) inset;
}
sr-nav-item.sr-active {
    color: var(--sr-focus);
    background-position-x: -165%;
}
sr-nav-item.sr-active:hover {
    box-shadow: 0 0 0 3px #0000;
}
sr-nav-item::before {
    content: "";
    position: absolute;
    left: 0px; top: 0px;
    height: 100%;
    width: 5px;
    background-color: var(--sr-subbackground);
    transition: background-color 0.2s, width 0.3s;
}
sr-nav-item.sr-active::before {
    background-color: var(--sr-focus);
    width: 8px;
}
sr-nav-item::after {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--sr-subbackground);
    outline: 2px dotted var(--sr-subbackground);
    outline-offset: 3px;
    transition: left 0.2s, background-color 0.2s, outline 0.2s;
}
sr-nav-item.sr-active::after {
    left: 3px;
    background-color: var(--sr-focus);
    outline: 2px dotted var(--sr-focus);
}