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

:host {
  display: none;
  position: relative;
  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    color 0.2s ease;
  flex-direction: row;
  border-width: nx-border-size(xs) nx-border-size(m);
  border-color: v(circle-toggle-border-color);
  border-style: solid;
  padding: nx-spacer(xs) - nx-border-size(xs) nx-spacer(2m) - nx-border-size(xs);
  width: 100%;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

:host:not(.is-flipped):not(.is-disabled):not(.is-readonly):hover {
  background-color: v(circle-toggle-hover-background-color);
  border-color: v(circle-toggle-hover-border-color);

  .nx-toggle-button__label-hint,
  .nx-toggle-button__label-text {
    color: v(circle-toggle-hover-icon-color);
  }
}

:host-context(.is-responsive) {
  @include media-breakpoint-down('small') {
    display: flex;
  }
}

.nx-toggle-button__label-hint {
  color: v(circle-toggle-icon-color);
  @include type-style(circle-toggle-hint-mobile);
}

.nx-toggle-button__label-text {
  color: v(circle-toggle-icon-color);
  @include type-style(circle-toggle-label-mobile);
  padding-top: 0;
  padding-right: nx-spacer(3xs);
  // hardcode for now, as in design the mobile toggle button doesn't exist anymore
  font-weight: nx-font-weight(semibold);

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

.nx-toggle-button__mobile-check {
  font-size: nx-font-size(s);
  height: nx-spacer(m);
  display: inline-block;
  opacity: 0;
  margin-right: nx-spacer(2xs);
  color: v(circle-toggle-checkmark-color);

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

:host(.is-first) {
  border-top-width: nx-border-size(m);
  border-radius: nx-border-radius(s) nx-border-radius(s) 0 0;
}

:host(.is-last) {
  border-bottom-width: nx-border-size(m);
  border-radius: 0 0 nx-border-radius(s) nx-border-radius(s);
}

:host(.is-flipped) {
  background-color: v(circle-toggle-selected-background-color);

  .nx-toggle-button__label-hint,
  .nx-toggle-button__label-text {
    color: v(circle-toggle-selected-icon-color);
  }

  .nx-toggle-button__mobile-check {
    opacity: 1;
  }
}

:host(.is-negative) {
  border-color: v(negative);

  .nx-toggle-button__label-hint,
  .nx-toggle-button__label-text,
  .nx-toggle-button__mobile-check {
    color: v(negative);
  }

  &:not(.is-flipped):not(.is-disabled):hover {
    background-color: v(negative-01);
    border-color: v(negative-01);

    .nx-toggle-button__label-hint,
    .nx-toggle-button__label-text {
      color: v(negative-accent);
    }
  }
}

:host(.is-negative.is-flipped) {
  background-color: v(negative);

  .nx-toggle-button__label-hint,
  .nx-toggle-button__label-text,
  .nx-toggle-button__mobile-check {
    color: v(negative-accent);
  }
}

:host(.is-disabled) {
  opacity: 0.4;
  cursor: not-allowed;
}

:host(.is-readonly) {
  border-color: v(circle-toggle-readonly-border-color);
  background-color: v(circle-toggle-readonly-background-color);
  color: v(circle-toggle-readonly-icon-color);

  &.is-flipped {
    background-color: v(circle-toggle-readonly-selected-background-color);
    color: v(circle-toggle-readonly-selected-icon-color);

    .nx-toggle-button__label-text,
    .nx-toggle-button__label-hint,
    .nx-toggle-button__mobile-check {
      color: v(circle-toggle-readonly-selected-icon-color);
    }
  }

  .nx-toggle-button__label-text,
  .nx-toggle-button__label-hint,
  .nx-toggle-button__mobile-check {
    color: v(circle-toggle-readonly-icon-color);
  }
}

@media screen and (forced-colors: active) {
  :host {
    forced-color-adjust: none;
    background-color: buttonFace !important;
    border-color: buttonText !important;
    color: buttonText !important;

    .nx-toggle-button__label-text,
    .nx-toggle-button__label-hint {
      color: buttonText !important;
    }
  }

  :host.is-flipped {
    forced-color-adjust: none;
    background-color: highlight !important;
    color: highlightText !important;

    .nx-toggle-button__label-text,
    .nx-toggle-button__label-hint {
      color: highlightText !important;
    }
  }

  :host.is-disabled {
    opacity: 1;
    border-color: GrayText !important;
    color: GrayText !important;
    background-color: buttonFace !important;

    .nx-toggle-button__label-text,
    .nx-toggle-button__label-hint {
      color: GrayText !important;
    }
  }
}
