@mixin multi-selector() {
    @include flex();
    width: 100%;
    height: 48px;
    border-radius: 4px;
    overflow: hidden;

    &--static {
      & > div {
        width: 50%;
      }
    }

    &__button {
        @include flex();
        @include align-items-center();
        @include justify-content-center();
        flex-grow: 1;
        width: auto;
        background-color: color('background');
        border: 2px solid color('borders');
        position: relative;
        overflow: auto;

        &:not(:first-child) {
          border-left: 0;
        }



        &--warning {
          border: 2px solid color("feedback", "warning") !important;

          &:not(:first-child) {
            margin-left: -2px;
          }
        }

        &--error {
          border: 2px solid color("feedback", "error") !important;

          &:not(:first-child) {
            margin-left: -2px;
          }
        }
    }

    label {
        @include flex();
        @include align-items-center();
        @include justify-content-center();
        @include font('IntervalNextBook');
        align-content: stretch;
        padding: 0 12px;
        font-size: em(20px);
        line-height: 1;
        color: color('buttons','disabled-text');
        width: 100%;
        height: 100%;
        cursor: pointer;
        white-space: nowrap;
    }

    input[type="radio"] {
        @include visually-hidden();

        &:checked + label {
            color: color('text','subheader');

            svg {
              display: block;
            }
        }
    }

    svg {
        display: none;
        margin-right: 12px;
        fill: color("input", "label");
    }
}