@import 'grid';
@import 'breakpoint';

$dropdown-overlay__focus-line-width: nx-border-size(xl);
$dropdown-overlay__option-margin: -(nx-spacer(2xs) + $dropdown-overlay__focus-line-width);

$border-size: nx-border-size(xs);

@function message-padding($padding) {
  @return $padding - $border-size;
}

@mixin focus-style {
  box-shadow: v(focus-box-shadow);

  @media screen and (forced-colors: active), (forced-colors: active) {
    box-shadow:
      0 0 0 2px background,
      0 0 0 6px CanvasText;
    outline: 4px solid CanvasText; // Chromium Edge
    outline-offset: 2px; // Chromium Edge
  }
}

@mixin formfield-outline-focus-styles {
  box-shadow: v(formfield-outline-focus-box-shadow);
  background-color: v(formfield-outline-focus-background-color);

  @media screen and (forced-colors: active) {
    box-shadow: 0 0 0 2px highlight;
    border: 1px solid highlight; // Chromium Edge
  }
}

@mixin focus-style-inset {
  box-shadow: v(focus-inset-box-shadow);

  @media screen and (forced-colors: active) {
    box-shadow:
      inset 0 0 0 4px CanvasText,
      inset 0 0 0 6px background;
    border: 4px solid CanvasText; // Chromium Edge
  }
}

@mixin create-font-weight-classes() {
  @each $key, $value in $font-weight {
    .nx-font-weight-#{$key} {
      font-weight: $value !important;
    }
  }
}

@mixin create-margin-classes() {
  $positions: 'top', 'bottom', 'left', 'right';

  @each $key, $value in $margins {
    .nx-margin-#{$key} {
      margin: $value !important;
    }
  }

  .nx-margin-0 {
    margin: 0 !important;
  }

  .nx-margin-x-0 {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .nx-margin-y-0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  @each $key, $value in $margins {
    .nx-margin-x-#{$key} {
      margin-right: $value !important;
      margin-left: $value !important;
    }

    .nx-margin-y-#{$key} {
      margin-top: $value !important;
      margin-bottom: $value !important;
    }
  }

  @each $position in $positions {
    .nx-margin-#{$position}-0 {
      margin-#{$position}: 0 !important;
    }
  }

  @each $key, $value in $margins {
    @each $position in $positions {
      .nx-margin-#{$position}-#{$key} {
        margin-#{$position}: $value !important;
      }
    }
  }
}

@mixin create-hidden-classes() {
  @each $key, $value in $grid-breakpoints-short {
    @include media-breakpoint-only($key, $grid-breakpoints-short) {
      .nx-hidden-#{$key} {
        display: none !important;
      }
    }
  }
}

@mixin create-modal-margin-class() {
  .nx-modal-margin-bottom {
    margin-bottom: nx-spacer(3m) !important;
  }

  @include media-breakpoint-response(mobile) {
    .nx-modal-margin-bottom {
      margin-bottom: nx-spacer(2m) !important;
    }
  }
}

@mixin dropdown-overlay__option {
  @include type-style(dropdown-item);
  padding-top: v(dropdown-item-padding-top);
  padding-right: v(dropdown-item-padding-right);
  padding-bottom: v(dropdown-item-padding-bottom);
  padding-left: v(dropdown-item-padding-left);
  cursor: pointer;
  position: relative;
  display: flex;
  max-width: 100%;
  white-space: nowrap;

  :host-context([dir='rtl']) & {
    padding: nx-flip-for-rtl(
      v(dropdown-item-padding-top) v(dropdown-item-padding-right) v(dropdown-item-padding-bottom)
        v(dropdown-item-padding-left)
    );
  }
}

@mixin dropdown-overlay__option-label {
  padding: 0 nx-spacer(2xs) + $dropdown-overlay__focus-line-width;
  margin: 0 $dropdown-overlay__option-margin;
  color: v(dropdown-item-text-color);
  word-break: break-word;

  @media screen and (forced-colors: active) {
    forced-colors-adjust: none;
    color: buttonText;
    background-color: buttonFace;
    border-radius: nx-border-radius(s);
  }
}

@mixin dropdown-overlay__option--outline {
  @include type-style(dropdown-item-outline);
}

@mixin tab__item {
  @include type-style(tab-item);
  text-decoration: none;
  border: none;
  background: transparent;
  color: v(tab-item-color);
  padding: v(tab-item-padding);
  margin: v(tab-item-margin);
  outline: none;
  position: relative;
  cursor: pointer;

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

  &:hover {
    color: v(tab-item-hover-color);
  }

  &:active {
    color: v(tab-item-active-color);
  }
}

@mixin tab__item--active {
  border-width: v(tab-item-active-border-width);
  font-weight: v(tab-item-active-font-weight);
  border-bottom-style: solid;
  border-color: v(tab-item-active-border-color);
  padding-bottom: 8px;
  cursor: default;

  &:hover,
  &:active {
    color: v(tab-item-color);
  }

  @media screen and (forced-colors: active) {
    border-color: highlight;
  }
}

@mixin tab__item--disabled {
  border-color: v(tab-item-disabled-color);
  color: v(tab-item-disabled-color);
  cursor: not-allowed;

  &:hover,
  &:active {
    color: v(tab-item-disabled-color);
  }

  @media screen and (forced-colors: active) {
    border-color: GrayText;
    background-color: buttonFace;
    color: GrayText;
  }

  ::ng-deep .nx-indicator {
    opacity: 0.4;
  }
}

@mixin message-layout {
  /* used for:
   * message
   * toast message
   * banner message
   */

  @include type-style(message);
  color: v(message-text-color);
  border-radius: v(message-border-radius);

  width: 100%;
  display: flex;
  align-items: flex-start;
  text-align: left;
  position: relative;
  border: $border-size solid;
  padding: message-padding(nx-spacer(m));

  @include media-breakpoint-response(mobile) {
    display: block;
  }

  // HINT: this will work only if mixin is included directly inside :host
  [dir='rtl'] & {
    text-align: right;
  }
}

@mixin message__close-icon {
  position: absolute;
  top: nx-spacer(s);
  right: nx-spacer(s);

  :host-context([dir='rtl']) & {
    right: auto;
    left: nx-spacer(s);
  }
}

@mixin input-placeholder {
  &::placeholder {
    @content;
  }

  &::-moz-placeholder {
    @content;
  }

  &::-webkit-input-placeholder {
    @content;
  }

  &:-ms-input-placeholder {
    @content;
  }
}
