.z-switch-button {
    appearance: none;
    font-family: Poppins;
    border-radius: 1.5em;
    height:3em;
    padding: 0;
    overflow: hidden;
    display: grid;
    width: fit-content;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    border: 1px solid var(--mdc-theme-primary);
    background-color: white;
    color: var(--mdc-theme-primary);
    cursor: pointer;
    margin: 0.5em;
    font-size: 100%;

    > div {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 1em;
        vertical-align: middle;
        /* width: 50%; */
        min-width: fit-content;
        height: 100%;
    }

    .active {
        background-color: var(--mdc-theme-primary);
        color: white;
    }
}

.z-switch-button:hover {
    border-color: color-mix(in srgb, white 10%, var(--mdc-theme-primary) 90%);
    color: color-mix(in srgb, white 10%, var(--mdc-theme-primary) 90%);
    .active {
        background-color:color-mix(in srgb, white 10%, var(--mdc-theme-primary) 90%);
    }
}

.z-clickable {
    appearance: none;
    color: inherit;
    background-color: inherit;
    border: none;
    font-size: inherit;
    font-family: inherit;
}