body, html {
    height: 100%;
    margin: 0;
    padding: 0;
    text-rendering: geometricPrecision;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-overflow-scrolling: touch !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

* {
    box-sizing: border-box;
}

label {
    cursor: inherit;
}

.seg-control {
    --background: rgba(239,239,240,1);
    background: var(--background);
    border-radius: 9px;
    margin: 0;
    padding: 2px;
    border: none;
    outline: none;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}

    .seg-control .option {
        position: relative;
        cursor: pointer;
    }

        .seg-control .option:hover input:not(:checked) + label span, .seg-control .option:active input:not(:checked) + label span, .seg-control .option:focus input:not(:checked) + label span {
            
            color:black;
        }

        .seg-control .option:active input:not(:checked) + label span {
            transform: scale(.95);
        }

        .seg-control .option label {
            position: relative;
            display: block;
            text-align: center;
            padding: 3px 6vmin;
            background: rgba(255,255,255,0);
            font-weight: 500;
            font-size: 14px;
            color: rgba(0, 0, 0, 0.5);
        }

            .seg-control .option label::before, .seg-control .option label::after {
                content: '';
                width: 1px;
                background: rgba(142,142,147,.15);
                position: absolute;
                top: 14%;
                bottom: 14%;
                border-radius: 10px;
                will-change: background;
                -webkit-transition: background .2s ease;
                transition: background .2s ease;
            }

            .seg-control .option label::before {
                left: 0;
                transform: translateX(-.5px);
            }

            .seg-control .option label::after {
                right: 0;
                transform: translateX(.5px);
            }

        .seg-control .option:first-of-type {
            grid-column: 1;
            grid-row: 1;
            box-shadow: none;
        }

            .seg-control .option:first-of-type label::before {
                opacity: 0;
            }

        .seg-control .option:last-of-type label::after {
            opacity: 0;
        }

        .seg-control .option input {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            -webkit-appearance: none;
            -moz-appearance: none;
            appearance: none;
            outline: none;
            border: none;
            opacity: 0;
        }

    .seg-control .selected {
        background: rgba(255,255,255,1);
        border: .5px solid rgba(0,0,0,0.04);
        box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);
        border-radius: 7px;
        grid-column: 1;
        grid-row: 1;
        z-index: 2;
        will-change: transform;
        -webkit-transition: transform .2s ease;
        transition: transform .2s ease;
    }

    .seg-control .option label span {
        display: block;
        position: relative;
        z-index: 2;
        -webkit-transition: all .2s ease;
        transition: all .2s ease;
        will-change: transform;
    }

    .seg-control .option label {
        margin: 0 !important;
        padding:0.5rem;
    }

    .seg-control .option input:checked + label::before, .seg-control .option input:checked + label::after {
        background: var(--background);
        z-index: 1;
    }

    .seg-control .option input:checked + label {
        cursor: default;
        color:black;
    }