/*!
    *
    * Wijmo Library 5.20261.50
    * https://developer.mescius.com/wijmo
    *
    * Copyright(c) MESCIUS inc. All rights reserved.
    *
    * Licensed under the End-User License Agreement For MESCIUS Wijmo Software.
    * us.sales@mescius.com
    * https://developer.mescius.com/wijmo/licensing
    *
    */

@use "../misc/mixins";
@use "../misc/variables";

// wijmo core

// primary control class: applies to all Wijmo controls
.wj-control {
  display: block;
  box-sizing: border-box;
  color: variables.$wj-txt;
  @include mixins.backgradient(variables.$wj-bkg, variables.$wj-bkg-grd);
  @include mixins.prefix(user-select, none, webkit moz ms);

  * {
    box-sizing: inherit;
  }

  // to make contenteditable work on iOS
  // http://stackoverflow.com/questions/21295698/html5-contenteditable-attribute-not-working-properly-on-ios7-mobile-safari
  [contenteditable] {
    @include mixins.prefix(user-select, text, webkit moz ms); // Required on iOS
  }

  // remove focus outline
  &:focus,
    *:not(.wj-tabpane *):focus,//WJM-25309, set outline to all elements that are not descendants of wj-tabpane on focus
    .wj-tabpane .wj-control *:focus, //WJM-25430, but still keep removing outline from all wj-control under wj-tabpane
    a:focus {
    outline: none;
  }

  // remove browser-specific elements from input controls
  input {
    &::-ms-clear {
      // remove IE clear button
      display: none;
    }

    &:-ms-input-placeholder {
      // set IE placeholder opacity (like Firefox, need single colon): TFS 457902
      opacity: 0.7; // C1WEB-26755
    }

    &[type="number"] {
      // remove spinner buttons in Chrome
      &::-webkit-inner-spin-button,
      &::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }
    }

    &:invalid {
      // remove red outline validation in Firefox
      box-shadow: none;
      outline: none; // TFS 327581
    }
  }

  // button elements
  .wj-btn {
    @include mixins.wjButton(
      variables.$wj-btn-bkg,
      variables.$wj-btn-grd,
      variables.$wj-btn-txt,
      variables.$wj-btn-hvr,
      variables.$wj-tdn-focus,
      variables.$wj-disabled-opacity
    );
  }

  // button-styled links
  a.wj-btn,
  button.wj-btn:not(.wj-btn-default) {
    // not for buttons in input controls
    @include mixins.wjButtonStyledLinks(variables.$wj-bdr-rad);
  }
}

// moved to top level for backward compatibility
.wj-header {
  @include mixins.backgradient(variables.$wj-hdr-bkg, variables.$wj-hdr-grd);
  color: variables.$wj-hdr-txt;
  font-weight: bold;
}
.wj-state-multi-selected {
  background: variables.$wj-msel-bkg;
  color: variables.$wj-msel-txt;
}

.wj-state-selected,
.wj-state-last-selected {
  background: variables.$wj-sel-bkg;
  color: variables.$wj-sel-txt;
}

@media (forced-colors: active) {
  .wj-control.wj-listbox {
    .wj-state-selected {
      outline: 1px solid WindowText;
      outline-offset: -1px;
    }

    .wj-listbox-item:hover {
      outline: 1px solid WindowText;
      outline-offset: -1px;
    }

    .wj-listbox-item {
      transition-duration: unset !important;
      background: none;
      color: WindowText;
    }
  }
}
.wj-state-disabled:not(.wj-popup) {
  // WJM-19483
  cursor: default;
  pointer-events: none; // TFS 466794
  opacity: variables.$wj-disabled-opacity; // TFS 472233
}

// inline control class: includes border
.wj-content {
  display: inline-block;
  border: variables.$wj-bdr;
  border-radius: variables.$wj-bdr-rad;
  overflow: hidden;
}

.wj-tooltip {
  box-sizing: border-box;
  position: absolute;
  pointer-events: auto; //allow mouse events on tooltip
  max-width: 400px;
  padding: variables.$wj-item-pdg;
  background: variables.$wj-tooltip;
  color: variables.$wj-tooltip-txt;
  border: variables.$wj-bdr;
  border-radius: variables.$wj-bdr-rad;
  box-shadow: variables.$wj-box-shadow;
  word-break: break-word; // TFS 426377
  -ms-word-break: break-all;

  &.wj-error-tip {
    background: variables.$wj-error-tooltip;
    color: variables.$wj-error-tooltip-txt;
    white-space: pre-line;
    font-weight: bold;
  }
}

.wj-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}