@import '~styles/mixins';

.toggle {
  .button {
    cursor: pointer;
    &.disabled {
      cursor: not-allowed;
    }
  }

  .button.active {
    background-color: $color_radio_checked;
    border-color: $color_radio_checked;
    color: #fff;
  }

  .value-container {
    margin-top: $form_element_vertical_spacing;
  }

  label,
  .button {
    display: inline-block;
    cursor: pointer;
  }
  img + .label {
    margin-top: 5px;
  }

  &:not(.united) {
    .button {
      width: 84px;
      box-shadow: 0 3px 8px 0 rgba(0, 0, 48, 0.18);
      border-radius: $border_radius;
      margin: 4px;
      padding: 13px 16px;
      text-align: center;
      font-size: 14px;
      font-weight: 500;
      &.auto {
        width: auto;
      }
    }
  }

  &.united {
    @include phone {
      .button {
        margin-right: 5px;
        margin-bottom: 5px;
        border-radius: $border-radius;
      }
    }
    @include min-phone {
      .button {
        margin: 0;
        border-radius: 0;
        border: $border_width solid $color_primary;
        border-left: $border_width solid transparent;
        &.active {
          border-left: $border_width solid $color_primary;
          z-index: 2;
        }
      }

      .button:not(:first-child) {
        margin-left: -$border_width;
      }

      .button:first-child {
        border-top-left-radius: $border_radius;
        border-bottom-left-radius: $border_radius;
        border-left: $border_width solid $color_border;
        &.active {
          border-left-color: $color_radio_checked;
        }
      }

      .button:last-child {
        border-top-right-radius: $border_radius;
        border-bottom-right-radius: $border_radius;
      }
    }
  }
}
