.segmented-picker {
    align-items: center;
    background: linear-gradient(to bottom, #ffffff 0%,#cdeefc 50%,#ffffff 100%);
    border-radius: 8px;
    display: flex;
    overflow: hidden;
    padding: 15px 7px 8px 7px;
    width: 300px;
    height: 54px;
    border: 1px solid #ccc;
}

    .segmented-picker > input {
        pointer-events: none;
        position: absolute;
        visibility: hidden;
    }

        .segmented-picker > input:nth-last-of-type(1):checked ~ label:last-of-type::before {
            left: 0;
        }

        .segmented-picker > input:nth-last-of-type(2):checked ~ label:last-of-type::before {
            left: -100%;
        }

        .segmented-picker > input:nth-last-of-type(3):checked ~ label:last-of-type::before {
            left: -200%;
        }

    .segmented-picker > label {
        align-items: center;
        cursor: pointer;
        display: flex;
        flex: 1;
        justify-content: center;
        padding: 8px;
        position: relative;
    }

        .segmented-picker > label > span {
            font-size: 16px;
            font-weight: 600;
            letter-spacing: 0.02em;
            position: relative;
            z-index: 2;
        }

        .segmented-picker > label:not(:first-of-type)::after {
            background-color: rgba(0, 0, 0, 0.12);
            content: "";
            display: block;
            height: 16px;
            left: 0;
            position: absolute;
            width: 1px;
            z-index: 0;
        }

        .segmented-picker > label:last-of-type::before {
            background-color: white;
            border-radius: 6px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12), 0 0 0 2px #f2f2f7;
            content: "";
            display: block;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            transition: 0.25s ease;
            width: 100%;
            z-index: 1;
        }