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

:host {
  display: inline-block;
  vertical-align: top;
  position: relative;

  &:not(.is-responsive) {
    opacity: 0.9999; // trick that focus-ring of check-icon can shine through
  }

  .nx-circle-toggle__input {
    opacity: 0;
    position: absolute;
  }
}

:host:not(.in-group) {
  margin-right: nx-spacer(xl);

  @include media-breakpoint-down('small') {
    margin-right: nx-spacer(4m);
  }

  [dir='rtl'] & {
    margin-right: initial;
    margin-left: nx-spacer(xl);

    @include media-breakpoint-down('small') {
      margin-right: initial;
      margin-left: nx-spacer(4m);
    }
  }
}

// ARIA
:host .nx-circle-toggle__input.cdk-keyboard-focused + .nx-circle-toggle__label {
  ::ng-deep .nx-toggle-circle__icon-wrapper,
  ::ng-deep .nx-toggle-circle__check-focus {
    @include focus-style;
  }

  ::ng-deep nx-mobile-toggle-button {
    @include focus-style;
    z-index: 1;
  }
}

:host(.has-error) {
  ::ng-deep {
    .is-flipped .nx-toggle-circle__check-icon,
    .is-flipped .nx-toggle-circle__icon-wrapper {
      background-color: v(danger) !important;
    }

    .nx-toggle-circle__icon-wrapper {
      border-color: v(danger) !important;
    }
  }
}
