.toggle-active.btn[disabled] { background-color: var(--secondary-color); color: var(--secondary-background); opacity: 1; } .toggle-not-active { background-color: var(--quaternary-background); color: var(--secondary-color); } .toggle-not-active:hover { color: var(--secondary-background); } .toggle-not-active:hover, .toggle-not-active:focus { background-color: var(--secondary-color); } .btn-group .btn.toggle-not-active, .btn-group .btn.toggle-active { border-color: var(--tertiary-color); padding-left: 30px; padding-right: 30px; } .btn-group .btn-primary, .btn-group .btn-primary:focus, .btn-group .btn-primary:hover { border-color: var(--secondary-color); } .btn.toggle-active > .tick, .btn.toggle-not-active > .tick { position: absolute; } .btn:first-child > .tick { left: 9px; top: calc(50% - 8pt); } .btn:last-child > .tick { right: 6px; top: calc(50% - 8pt); } .btn-group .btn + .btn { margin-left: -2px; } label.toggle-label { display: flex; flex-direction: column; } @media (max-width: 550px) { .btn:first-child > .tick { left: 6px; } .btn:last-child > .tick { right: 5px; } } @media (max-width: 440px) { .btn:first-child > .tick { left: auto; right: 5px; } }