.button {
    &.chip {
        --height: 33px;
        --chip-color: #fff;
        --chip-color-checked: #212B36;
        --chip-transition:ease all 0.3s;
        height: var(--height);
        min-width: 56px;
        overflow: hidden;
        cursor: pointer;
        display: inline-block;
        background-color: transparent;
        border-radius: var(--height);
        position: relative;
        user-select: none;
        box-shadow: 0 0 0 1px var(--chip-color);
        transition: var(--chip-transition);

        input {
            opacity: 0;
            width: 0;
            height: 0;
            position: absolute;

            &:checked {
                ~.label {
                    background-color: var(--chip-color);
                    transition: var(--chip-transition);

                    span {
                        color: var(--chip-color-checked);
                        font-weight: 700;
                    }
                }
            }
        }

        .label {
            height: var(--height);
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: var(--chip-transition);
            span {
                display:flex;
                align-items: center;
                color: var(--chip-color);
                font-size: 1.125em;
                line-height: 1.4em;
                padding: 0 16px;

            }
        }
    }
}