@use "sass:math";
@use "sass:string";

/* ==========================================================================
   box-sizing
   ========================================================================== */

@mixin widget {
  // Select

  // 
  $select_caret: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-8 -8 32 32' width='32' height='32'%3E%3Cpath d='M8 11.207l-4-4V5.793l4 4 4-4v1.414z' fill='%23" +
    string.slice(#{$interactive-font-color}, 2) + "' fillrule='nonzero'/%3E%3C/svg%3E";

  @include icomoonIconSelector() {
    display: inline-block;
    font-size: $icon-size;
  }

  .geoscene-widget {
    /*
     * Padding/spacing - should be respected by each widget
     */
    --geoscene-widget-padding-x: #{$side-spacing};
    --geoscene-widget-padding-y: #{$cap-spacing};
    --geoscene-widget-padding: var(--geoscene-widget-padding-y) var(--geoscene-widget-padding-x);

    box-sizing: border-box;
    background-color: $background-color;
    line-height: $line-height;
    color: $font-color;
    font-family: $font-family;
    font-size: $font-size;

    *,
    *::before,
    *::after {
      box-sizing: inherit;
    }

    &#{&}--disabled {
      > * {
        opacity: $opacity--disabled;
        pointer-events: none;
      }
    }

    &.geoscene-widget--compact {
      --geoscene-widget-padding-y: 0;
      --geoscene-widget-padding-x: 0;
    }
  }

  .geoscene-widget__anchor {
    color: $button-color;

    &:hover {
      color: $button-color--hover;
    }

    &:hover,
    &:focus {
      text-decoration: underline;
    }

    &--disabled {
      opacity: $opacity--disabled;
      pointer-events: none;
    }
  }

  .geoscene-widget__header {
    display: flex;
    flex: 1 0 100%;
    align-items: center;
    justify-content: space-between;
    background-color: $background-color;
    padding: $cap-spacing 0 $cap-spacing $side-spacing;
    width: 100%;
    min-height: $header-height--min;

    .geoscene-widget__heading {
      display: flex;
      align-items: center;
      margin: 0;
      padding: 0;
      width: calc(100% - #{$header-button-width});
      text-align: initial;
      color: $interactive-font-color;
    }

    &-button {
      appearance: none;
      display: flex;
      flex: 0 0 $header-button-width;
      align-items: center;
      align-self: stretch;
      justify-content: center;
      border: none;
      background-color: transparent;
      cursor: pointer;
      padding: 0;
      width: $header-button-width;
      color: $interactive-font-color;
    }
  }

  .geoscene-widget__heading {
    margin: 0 0 0.5rem;
    color: $heading-color;
    font-weight: $font-weight__heading;
  }

  h1.geoscene-widget__heading {
    font-size: $font-size__h1;
  }

  h2.geoscene-widget__heading {
    font-size: $font-size__h2;
  }

  h3.geoscene-widget__heading,
  h4.geoscene-widget__heading,
  h5.geoscene-widget__heading,
  h6.geoscene-widget__heading {
    font-size: $font-size__lt-h2;
  }

  .geoscene-widget__footer {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: $background-color;
    width: 100%;
    min-height: $footer-height--min;
  }

  .geoscene-widget__footer-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: $interactive-font-color;

    &-previous-button,
    &-next-button {
      transition: background-color 125ms ease-in-out;
      margin: 0 $side-spacing--half;
      border: 0;
      background-color: transparent;
      cursor: pointer;
      padding: $cap-spacing $side-spacing;

      &:hover,
      &:focus {
        background-color: $background-color--hover;
        color: $interactive-font-color--hover;
      }
    }
  }

  .geoscene-menu {
    @include defaultBoxShadow();

    position: absolute;
    top: 100%;
    left: 0;
    visibility: hidden;
    z-index: 1;
    margin: $cap-spacing--eighth 0 0 0;
    background-clip: padding;
    background-clip: padding-box;
    background-color: $background-color;
    padding: 0;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    line-height: 16px;
    font-size: 14px;

    .geoscene-menu__header {
      background-color: $background-color--inverse;
      padding: 6px 12px;
      color: $interactive-font-color--inverse;
    }

    &__list {
      margin: 0;
      padding: 0;
      list-style: none;
    }

    &__list-item {
      border-top: solid 1px $border-color;
      border-left: $border-size--active solid transparent;
      cursor: pointer;
      padding: 0.8em 1em;

      /* stylelint-disable-next-line order/order */
      @include icomoonIconSelector() {
        padding-right: $font-size * 0.2;
      }
    }

    &__list-item:first-child {
      border-top: none;
    }

    &__list-item--focus,
    &__list-item:hover,
    &__list-item:focus {
      background-color: $background-color--hover;
    }

    &__list-item:active {
      background-color: $background-color--active;
    }

    &__list-item--active,
    &__list-item--active:hover,
    &__list-item--active:focus {
      border-left-color: $border-color--active;
      background-color: $background-color--active;
    }
  }

  .geoscene-widget__table {
    border: none;
    width: 100%;
    border-collapse: collapse;
    line-height: 1.3em;
    color: $font-color;

    tr:nth-child(odd) {
      background-color: rgba($background-color--inverse, 0.1);
    }

    tr:nth-child(even) {
      background-color: rgba($background-color--inverse, 0.02);
    }

    tr {
      a {
        color: $interactive-font-color;

        &:hover,
        &:focus {
          color: $interactive-font-color--hover;
        }
      }

      td,
      th {
        padding: 0.5em 0.7em;
        vertical-align: top;
        word-break: break-word;
        font-size: $font-size__body;
        font-weight: $font-weight;
      }

      th {
        border-right: 3px solid rgb(0 0 0 / 5%);
        width: 50%;
        text-align: left;
      }

      td {
        width: 50%;
      }
    }
  }

  .geoscene-input {
    border: 1px solid $border-color--input;
    background-color: $background-color;
    color: $font-color;
    font-size: $font-size;

    &::-ms-clear {
      display: none;
    }

    &::placeholder {
      opacity: 1;
      color: $font-color--placeholder;
    }

    &:placeholder-shown {
      text-overflow: ellipsis;
    }

    &[type="text"],
    &[type="password"],
    &[type="number"] {
      padding: 0 0.5em;
      height: $button-height;
    }
  }

  calcite-combobox.geoscene-input {
    border: none;
  }

  .geoscene-button {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background-color 125ms ease-in-out,
      border 125ms ease-in-out;
    border: 1px solid $button-color;
    background-color: $button-color;
    cursor: pointer;
    padding: $cap-spacing--half $side-spacing--half;
    width: 100%;
    min-height: $button-height;
    overflow: hidden;
    white-space: normal;
    word-break: normal;
    color: $button-color--inverse;
    font-family: inherit;
    font-size: $font-size;

    &:hover {
      border: 1px solid $button-color--hover;
      background-color: $button-color--hover;
      color: $button-color--inverse;
    }

    &.geoscene-button--small {
      min-height: $button-height--half;
      font-size: $font-size--small;
    }

    &.geoscene-button--half {
      display: inline-block;
      width: 50%;
    }

    &.geoscene-button--third {
      display: inline-block;
      width: 33%;
    }
  }

  .geoscene-button--secondary {
    background-color: transparent;
    color: $button-color;
  }

  .geoscene-button--tertiary {
    border-color: transparent;
    background-color: transparent;
    color: $button-color;

    &:hover {
      border-color: transparent;
      background-color: $background-color--hover;
      color: $button-color--hover;
    }
  }

  .geoscene-button--disabled {
    opacity: $opacity--disabled;
    pointer-events: none;
  }

  .geoscene-button--drill-in {
    @include borderBoxShadow();

    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background-color 125ms ease-in-out;
    margin: $cap-spacing $side-spacing--half;
    outline-offset: -4px;
    border: none;
    border-radius: $border-radius;
    background-color: $background-color;
    cursor: pointer;
    padding: $cap-spacing $side-spacing--half;
    text-align: unset;
    text-decoration: none;

    &:hover,
    &:focus {
      background-color: $background-color--hover;
    }

    &__title {
      font-size: $font-size;
    }

    /* stylelint-disable-next-line order/order */
    @include icomoonIconSelector() {
      padding: 0 $side-spacing--half;
    }
  }

  .geoscene-widget__content--empty {
    display: flex;
    flex-flow: column wrap;
    align-items: center;
    padding: $cap-spacing--plus-half $side-spacing--plus-half;
    text-align: center;
    color: $interactive-font-color;

    h1.geoscene-widget__heading,
    h2.geoscene-widget__heading,
    h3.geoscene-widget__heading,
    h4.geoscene-widget__heading,
    h5.geoscene-widget__heading {
      font-weight: $font-weight;
    }
  }

  .geoscene-widget__content-illustration--empty {
    padding: 1rem 0;
    width: 128px;
  }

  .geoscene-widget__content-icon--empty {
    padding: 0.5rem 0;
    width: 32px;
  }

  .geoscene-select {
    appearance: none;
    display: block;
    margin: 0;
    border: 1px solid $border-color--input;
    border-radius: 0;
    background: url($select_caret) no-repeat right center $background-color;
    cursor: pointer;
    padding: 0 0.5em;
    width: 100%;
    height: $button-height;
    color: $font-color;
    font-family: inherit;
    font-size: 0.85em;

    &[disabled] {
      cursor: auto;
    }
  }

  .geoscene-select::-ms-expand {
    display: none;
  }

  // Disabled
  .geoscene-disabled a,
  .geoscene-disabled [role="menu"],
  .geoscene-disabled [role="checkbox"] {
    color: $interactive-font-color--disabled;
  }

  .geoscene-disabled {
    @include icomoonIconSelector() {
      color: $interactive-font-color--disabled;
    }
  }

  .keynav-mode {
    .geoscene-widget {
      //  Saving this for when we can toggle a key-nav class
      &:focus {
        @include outlineStyle();
      }

      * {
        &:focus {
          @include outlineStyle();
        }
      }
    }
  }

  /* ==========================================================================
   Loader
   ========================================================================== */
  .geoscene-widget__loader-animation {
    display: block;
    transform: translateZ(0);
    border: 0.15em solid transparent;
    border-radius: 100%;
    border-color: rgba($font-color, 0.8) $border-color $border-color $border-color;
    width: 1em;
    height: 1em;
    animation: geoscene-rotate 1250ms infinite linear;
    font-size: $spinning-loader-size;
  }

  /* ==========================================================================
   Widget Button
   ========================================================================== */

  .geoscene-widget--button {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    transition: background-color 125ms ease-in-out;
    margin: 0;
    background-color: $background-color;
    cursor: pointer;
    padding: 0;
    width: $button-width;
    height: $button-height;
    overflow: hidden;
    text-align: center;
    color: $interactive-font-color;
    font-size: $font-size;

    // Make Calcite widget button's default background match all other widget
    // buttons, unless a custom appearance was specified
    &:not([appearance]),
    &[appearance="solid"] {
      --calcite-color-foreground-3: $background-color;
    }

    &:hover {
      background-color: $background-color--hover;
      color: $interactive-font-color--hover;
    }

    &:active {
      background-color: $background-color--active;
    }

    &:is(calcite-button) {
      // Put outline inside the button
      --calcite-offset-invert-focus: 1;

      // Make calcite-button's icon color match calcite-action's
      &:not(:hover) {
        --calcite-ui-icon-color: var(--calcite-color-text-3);
      }
    }

    // Align Calcite loader horizontally
    calcite-loader[inline] {
      margin: auto;
    }
  }

  /* ==========================================================================
   Components (top Widget node in geoscene-ui-corner)
   ========================================================================== */

  .geoscene-ui-corner {
    .geoscene-component.geoscene-widget {
      @include defaultBoxShadow();
    }

    .geoscene-expand .geoscene-widget--panel,
    .geoscene-expand .geoscene-widget--panel-height-only,
    .geoscene-component.geoscene-widget--panel,
    .geoscene-component.geoscene-widget--panel-height-only {
      transition: max-height 250ms ease-in-out;
      min-height: $panel-min-height--xsmall;
      overflow-y: auto;
    }

    .geoscene-component > .geoscene-widget--panel,
    .geoscene-component.geoscene-widget--panel {
      width: $panel-width;

      .geoscene-widget--panel {
        // widget--panel inside another widget--panel
        width: auto;
      }
    }
  }

  // Max heights
  .geoscene-view-height-greater-than-medium {
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel,
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel-height-only {
      max-height: $view-height--gt-medium__component-max-height;
    }
  }

  .geoscene-view-height-medium {
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel,
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel-height-only {
      max-height: $view-height--medium__component-max-height;
    }
  }

  .geoscene-view-height-small {
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel,
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel-height-only {
      max-height: $view-height--small__component-max-height;
    }
  }

  .geoscene-view-height-xsmall {
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel,
    .geoscene-ui-corner .geoscene-component.geoscene-widget--panel-height-only {
      max-height: $view-height--xsmall__component-max-height;
    }
  }

  .geoscene-ui-bottom-right,
  .geoscene-ui-bottom-left {
    .geoscene-menu {
      top: auto;
      bottom: 100%;
      margin-top: 0;
      margin-bottom: $cap-spacing--eighth;
    }
  }

  /* ==========================================================================
   RTL
   ========================================================================== */

  [dir="rtl"] {
    .geoscene-widget__table {
      th {
        border-right: none;
        border-left: 3px solid rgb(0 0 0 / 5%);
        text-align: right;
      }
    }

    .geoscene-select {
      background-position: left 50%;
    }

    .geoscene-menu__list-item {
      border-right: $border-size--active solid transparent;
      border-left: none;

      /* stylelint-disable-next-line order/order */
      @include icomoonIconSelector() {
        padding-right: 0;
        padding-left: math.floor($font-size * 0.2);
      }
    }

    .geoscene-menu__list-item--active {
      border-right-color: $border-color--active;
    }
  }

  /* ==========================================================================
   accessibility
   ========================================================================== */

  .geoscene-icon-font-fallback-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
  }

  .geoscene-rotating {
    transform: translateZ(0);
    animation: geoscene-rotate 1250ms infinite linear;
  }

  /* ==========================================================================
   clearfixing
   ========================================================================== */

  /**
 * taken from http://nicolasgallagher.com/micro-clearfix-hack/
 *
 * For modern browsers
 * 1. The space content is one way to avoid an Opera bug when the
 *    contenteditable attribute is included anywhere else in the document.
 *    Otherwise it causes space to appear at the top and bottom of elements
 *    that are clearfixed.
 * 2. The use of `table` rather than `block` is only necessary if using
 *    `:before` to contain the top-margins of child elements.
 */

  .geoscene-clearfix {
    &::before,
    &::after {
      /* 1 */
      display: table;
      content: " ";

      /* 2 */
    }

    &::after {
      clear: both;
    }
  }

  /* ==========================================================================
   interaction
   ========================================================================== */

  .geoscene-interactive {
    cursor: pointer;
  }

  /* ==========================================================================
   visibility
   ========================================================================== */

  .geoscene-hidden {
    display: none !important;
  }

  .geoscene-invisible {
    visibility: hidden !important;
  }

  .geoscene-offscreen {
    position: absolute;
    top: -999em;
    left: -999em;
  }

  /* ==========================================================================
   component shims
   ========================================================================== */
  .geoscene-match-height {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    overflow: hidden;
  }

  @keyframes geoscene-fade-in {
    0% {
      opacity: 0;
    }

    25% {
      opacity: 0;
    }

    100% {
      opacity: 1;
    }
  }
}

@if $include_Widget == true {
  @include widget();
}