.segmented-control {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    width: fit-content;
    min-width: 50%;
    border-radius: 50px;

    &__control {
        flex: 1;
        display: flex;
        justify-content: space-around;
        height: inherit;
        align-items: center;
        padding: 5px;

        &:last-child {
            border: none;
        }

        .segmented-control__label {
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
            display: block;
            text-align: center;
        }
    }

    &__input {
        display: none;

        &[type="radio"]:not(:checked),
        &[type="radio"]:checked {
            opacity: 0;
        }

        &:not(:checked)+label {
            cursor: pointer;
        }

        &:disabled+label {
            cursor: not-allowed;
        }
    }

    &__label {
        height: 100%;
        width: 100%;
        padding: 1px;
        z-index: 2;
    }

    .selector {
        height: 100%;
        border-radius: 50px;
        position: absolute;
        z-index: 1;
        left: 0;
        width: 50%;
        transform: translate(100%);
    }
}