@import '../shared-styles/index';

$border-width: nx-border-size(m);
$border-radius: nx-border-radius(s);

@function button-padding($padding) {
  @return $padding - $border-width;
}

:host {
  display: flex;
  position: relative;
  flex-direction: row;

  @include media-breakpoint-down('small') {
    width: 100%;
  }

  &.has-error {
    .nx-radio-toggle__input:checked + .nx-radio-toggle__label-container {
      border-color: v(danger);
      background-color: v(danger);
    }
    .nx-radio-toggle__input:checked + .nx-radio-toggle__label-container:hover {
      border-color: v(toggle-button-error-selected-hover);
      background-color: v(toggle-button-error-selected-hover);
    }
    .nx-radio-toggle__input:checked + .nx-radio-toggle__label-container:active {
      border-color: v(toggle-button-error-selected-active);
      background-color: v(toggle-button-error-selected-active);
    }

    .nx-radio-toggle__label-container {
      border-color: v(danger);
      color: v(danger);
    }
  }
}

.nx-radio-toggle__input {
  opacity: 0;
  position: absolute;

  &:active + .nx-radio-toggle__label-container {
    background-color: v(toggle-button-active-background-color);
    border-color: v(toggle-button-active-border-color);
    color: v(toggle-button-active-text-color);
  }

  &:checked:disabled + .nx-radio-toggle__label-container {
    background-color: v(toggle-button-disabled-selected-background-color);
    border-color: v(toggle-button-disabled-selected-border-color);
    color: v(toggle-button-disabled-selected-text-color);
  }
  &:checked:not(:disabled) + .nx-radio-toggle__label-container:hover {
    background-color: v(toggle-button-hover-checked-background-color);
    border-color: v(toggle-button-hover-checked-border-color);
    color: v(toggle-button-hover-checked-text-color);
  }
  &:checked:not(:disabled) + .nx-radio-toggle__label-container:active {
    background-color: v(toggle-button-active-checked-background-color);
    border-color: v(toggle-button-active-checked-border-color);
    color: v(toggle-button-active-checked-text-color);
  }

  &:disabled + .nx-radio-toggle__label-container {
    background-color: v(toggle-button-disabled-background-color);
    border-color: v(toggle-button-disabled-border-color);
    color: v(toggle-button-disabled-text-color);
    cursor: not-allowed;

    .nx-radio-toggle__label {
      cursor: not-allowed;
    }
  }

  &.is-readonly + .nx-radio-toggle__label-container {
    background-color: v(toggle-button-readonly-unselected-background-color);
    border-color: v(toggle-button-readonly-unselected-border-color);
    color: v(toggle-button-readonly-unselected-text-color);
    .nx-radio-toggle__label:hover {
      cursor: not-allowed;
    }
  }

  &.is-readonly + .nx-radio-toggle__label-container:hover {
    cursor: not-allowed;
  }

  &:checked.is-readonly + .nx-radio-toggle__label-container,
  &:checked.is-readonly + .nx-radio-toggle__label-container:hover {
    background-color: v(toggle-button-readonly-selected-background-color);
    border-color: v(toggle-button-readonly-selected-border-color);
    color: v(toggle-button-readonly-selected-text-color);
  }
}

.nx-radio-toggle__input:checked + .nx-radio-toggle__label-container {
  background-color: v(toggle-button-selected-background-color);
  border-color: v(toggle-button-selected-border-color);
  color: v(toggle-button-selected-text-color);
  cursor: default;

  .nx-radio-toggle__label {
    cursor: default;
  }
}

.nx-toggle-button__mobile-check {
  display: none;
  font-size: nx-font-size(s);
  margin-right: nx-spacer(2xs);
  height: nx-spacer(m);

  :host-context([dir='rtl']) & {
    margin-right: initial;
    margin-left: nx-spacer(2xs);
  }
}

// small version
:host-context(.nx-radio-toggle--small) {
  .nx-radio-toggle__label-container {
    @include type-style(toggle-button-small);
    min-height: v(toggle-button-small-min-height);
    padding: v(toggle-button-small-padding);
    text-transform: none;
    border-radius: v(toggle-button-small-border-radius);
  }

  .nx-radio-toggle__label-container--first {
    border-radius: v(toggle-button-small-rounded-border-on-the-left-radius);
  }
  .nx-radio-toggle__label-container--last {
    border-radius: v(toggle-button-small-rounded-border-on-the-right-radius);
    &.nx-radio-toggle__label-container--first {
      border-radius: v(toggle-radio-radius);
    }
  }
}

.nx-radio-toggle {
  user-select: none;
  cursor: pointer;
}

$border-rounded-on-the-left: $border-radius 0 0 $border-radius;
$border-rounded-on-the-right: 0 $border-radius $border-radius 0;
$border-rounded-on-the-top: $border-radius $border-radius 0 0;
$border-rounded-on-the-bottom: 0 0 $border-radius $border-radius;

$bordered-without-left: $border-width $border-width $border-width 0;
$bordered-without-right: $border-width 0 $border-width $border-width;

::ng-deep .nx-radio-toggle:not(.disable-mobile) {
  .nx-radio-toggle__label-container {
    @include media-breakpoint-down('small') {
      border-width: nx-border-size(xs) nx-border-size(m);
      padding: nx-spacer(xs) - nx-border-size(xs) nx-spacer(2m) - nx-border-size(xs);
      &.nx-radio-toggle__label-container {
        border-radius: v(toggle-button-rounded-mobile);
      }
      &.nx-radio-toggle__label-container--first {
        border-width: $border-width;
        border-bottom-width: nx-border-size(xs);
        border-radius: v(toggle-button-rounded-on-the-top);
      }

      &.nx-radio-toggle__label-container--last {
        border-width: $border-width;
        border-top-width: nx-border-size(xs);
        border-radius: v(toggle-button-rounded-on-the-bottom);

        // prevent style changes if there is only one toggle option
        &.nx-radio-toggle__label-container--first {
          border-radius: $border-radius;
          border-width: $border-width;
        }
      }
    }
  }

  .nx-radio-toggle__input:checked + .nx-radio-toggle__label-container {
    .nx-toggle-button__mobile-check {
      @include media-breakpoint-down('small') {
        display: inline-block;
      }
    }
  }
}

.nx-radio-toggle__label-container.nx-radio-toggle__label-container--first {
  border-radius: v(toggle-radio-button-rounded-on-the-left);
  border-width: v(toggle-border-without-right);

  :host-context([dir='rtl']) & {
    border-radius: v(toggle-radio-button-rounded-on-the-right);
    border-width: v(toggle-border-without-left);

    @include media-breakpoint-down('small') {
      border-width: v(toggle-border-width);
      border-bottom-width: nx-border-size(xs);
      border-radius: $border-rounded-on-the-top;
    }
  }
}

.nx-radio-toggle__label-container.nx-radio-toggle__label-container--last {
  border-radius: v(toggle-radio-button-rounded-on-the-right);
  border-width: v(toggle-border-width);

  :host-context([dir='rtl']) & {
    border-radius: v(toggle-radio-button-rounded-on-the-left);
    border-width: v(toggle-border-width);
  }

  :host-context([dir='rtl']) & {
    border-radius: v(toggle-radio-button-rounded-on-the-left);
    border-width: v(toggle-border-width);

    @include media-breakpoint-down('small') {
      border-width: v(toggle-border-width);
      border-top-width: nx-border-size(xs);
      border-radius: $border-rounded-on-the-bottom;
    }
  }
}

.nx-radio-toggle__label-container {
  @include type-style(toggle-button-large);
  padding: v(toggle-button-vertical-padding) v(toggle-button-horizontal-padding);
  color: v(toggle-button-unselected-text-color);
  background-color: v(toggle-button-unselected-background-color);
  border-color: v(toggle-button-unselected-border-color);
  border-style: v(toggle-button-style);
  border-radius: v(toggle-radio-button-radius);
  border-width: v(toggle-border-without-right);
  cursor: pointer;
  flex-grow: 1;
  text-align: center;
  text-transform: v(button-text-transform);
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  display: flex;
  align-items: center;
  height: 100%;
  min-height: nx-spacer(m);

  @include media-breakpoint-down('small') {
    justify-content: center;
  }

  :host-context([dir='rtl']) & {
    border-width: $bordered-without-left;

    @include media-breakpoint-down('small') {
      border-width: nx-border-size(xs) nx-border-size(m);
    }
  }

  &:hover {
    background-color: v(toggle-button-hover-background-color);
    border-color: v(toggle-button-hover-border-color);
    color: v(toggle-button-hover-text-color);
  }
  &:active {
    background-color: v(toggle-button-active-background-color);
    border-color: v(toggle-button-active-border-color);
    color: v(toggle-button-active-text-color);
  }
}

// negative version
:host-context(.nx-radio-toggle--negative) {
  .nx-radio-toggle__input {
    &:focus + .nx-radio-toggle__label-container {
      background-color: v(negative-01);
      border-color: v(negative-01);
      color: v(negative-accent);
    }

    &:active + .nx-radio-toggle__label-container {
      background-color: v(negative-02);
      border-color: v(negative-02);
      color: v(negative-accent);
    }

    &:disabled:checked + .nx-radio-toggle__label-container {
      background-color: v(negative-dimmed);
      border-color: transparent;
      color: v(negative-background-dimmed);
    }

    &:disabled + .nx-radio-toggle__label-container {
      background-color: transparent;
      border-color: v(negative-dimmed);
      color: v(negative-dimmed);
    }

    &:checked + .nx-radio-toggle__label-container {
      background-color: v(negative);
      border-color: v(negative);
      color: v(negative-accent);
    }
  }

  .nx-radio-toggle__label-container {
    background-color: transparent;
    border-color: v(negative);
    color: v(negative);
  }

  .nx-radio-toggle__label-container:hover {
    background-color: v(negative-01);
    border-color: v(negative-01);
    color: v(negative-accent);
  }
}

.nx-radio-toggle__label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

// focus style
.nx-radio-toggle__input.cdk-keyboard-focused + .nx-radio-toggle__label-container {
  @include focus-style;
  z-index: 1; // otherwise the right box shadown is not shown
}

@media screen and (forced-colors: active) {
  :host {
    forced-color-adjust: none;
  }

  .nx-radio-toggle__label-container {
    background-color: buttonFace !important;
    border-color: buttonText !important;
    color: buttonText !important;

    .nx-radio-toggle__label {
      forced-colors-adjust: none;
    }
  }

  .nx-radio-toggle__input {
    &:disabled + .nx-radio-toggle__label-container {
      background-color: buttonFace !important;
      border-color: GrayText !important;
      color: GrayText !important;
    }

    &:checked + .nx-radio-toggle__label-container {
      background-color: highlight !important;
      border-color: buttonText !important;

      .nx-radio-toggle__label {
        color: highlightText !important;
      }
    }
  }
}
