.toggle-switch-container {
display: inline-block;
vertical-align: bottom;
margin-bottom: 5px;
} .switch-container {
position: relative;
display: flex;
width: 250px;
height: 36px;
border: 1px solid #ccc;
border-radius: 5px;
overflow: hidden;
box-sizing: border-box;
font-size: 14px;
} .switch-container .switch-option {
position: relative;
z-index: 2;
flex: 1;
display: block;
text-align: center;
line-height: 34px;
background: transparent;
font-size: 14px !important;
font-weight: 600 !important;
font-style: normal;
font-family: inherit;
text-decoration: none !important;
transition: color 0.3s ease;
} #institutional {
color: #1385ca;
}
#sportive {
color: #4d4d4d;
} .switch-container .slider {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 50%;
height: 100%;
border-radius: 4px;
background-color: transparent;
} body.loaded .switch-container .slider {
transition:
left 0.3s ease,
background-color 0.3s ease;
} .switch-container.active-institutional .slider {
left: 0;
background-color: #1385ca;
}
.switch-container.active-institutional #institutional {
color: #fff;
}
.switch-container.active-institutional #sportive {
color: #4d4d4d;
} .switch-container.active-sportive .slider {
left: 50%;
background-color: #4d4d4d;
}
.switch-container.active-sportive #sportive {
color: #fff;
}
.switch-container.active-sportive #institutional {
color: #1385ca;
} .switch-container:not(.active-institutional)
#institutional:hover ~ .slider {
left: 0;
background-color: #1385ca;
}
.switch-container:not(.active-institutional)
#institutional:hover {
color: #fff;
} .switch-container.active-sportive:has(#institutional:hover)
#sportive {
color: #4d4d4d;
} .switch-container:not(.active-sportive)
#sportive:hover ~ .slider {
left: 50%;
background-color: #4d4d4d;
}
.switch-container:not(.active-sportive)
#sportive:hover {
color: #fff;
} .switch-container.active-institutional:has(#sportive:hover)
#institutional {
color: #1385ca;
} .switch-container .switch-option:focus {
outline: none;
}
.switch-container .switch-option:focus-visible {
outline: 2px solid currentColor;
outline-offset: -3px;
}