includes.scss

@import "@esri/calcite-base/dist/index";
@import "@esri/calcite-design-tokens/dist/scss/index";
@import "@esri/calcite-design-tokens/dist/scss/core";

/* mixins & extensions */
@import "animation";
@import "focus";
@import "host";
@import "spacing";
@import "floating-ui";
@import "sortable";

@mixin slotted($selector, $tag, $scope: "") {
  #{$scope} slot[name="#{$selector}"]::slotted(#{$tag}),
  #{$scope} #{$tag}::slotted([slot="#{$selector}"]) {
    @content;
  }
}

@mixin word-break() {
  word-wrap: break-word;
  word-break: break-word;
}

// mixin to hide inputs from form-associated components
@mixin hidden-form-input() {
  ::slotted(input[slot="hidden-form-input"]) {
    margin: 0 !important;
    opacity: 0 !important;
    outline: none !important;
    padding: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    transform: none !important;
    -webkit-appearance: none !important;
    z-index: -1 !important;
  }
}

// mixin for the container of validation messages displayed below form-associated components
@mixin form-validation-message() {
  .validation-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    align-self: stretch;
  }

  :host([scale="m"]) .validation-container,
  :host([scale="l"]) .validation-container {
    padding-block-start: 0.5rem;
  }

  :host([scale="s"]) .validation-container {
    padding-block-start: 0.25rem;
  }
}

// mixin to provide base disabled styles for interactive components
// additional styling can be passed via @content
@mixin disabled() {
  :host([disabled]) {
    @extend %disabled-host-only;
    @content;

    ::slotted([calcite-hydrated][disabled]),
    [calcite-hydrated][disabled] {
      /* prevent opacity stacking */
      @apply opacity-100;
    }
  }

  .interaction-container {
    display: contents;
  }
}

// used for host-specific styling when the `disabled` mixin cannot be applied on the host (e.g., `display: contents`)
%disabled-host-only {
  @apply opacity-disabled cursor-default select-none;
  @extend %non-interactive-host-contents;
}

%non-interactive-host-contents {
  *,
  ::slotted(*) {
    @apply pointer-events-none;
  }
}

// mixin to provide default invisibility and disabling of pointer events for components.
@mixin calcite-hydrated-hidden() {
  :host([calcite-hydrated-hidden]) {
    visibility: hidden !important; // 'important' is being used here to temporarily handle precendence of visibility set with calcite-hydrated. Do not follow this pattern. See #991.
    pointer-events: none;
  }
}

@mixin base-component() {
  :host([hidden]) {
    @apply hidden;
  }

  [hidden] {
    @apply hidden;
  }
}

@mixin x-button() {
  :host([scale="s"]) {
    .x-button {
      inline-size: theme("spacing.4");
      block-size: theme("spacing.4");
    }
  }

  :host([scale="m"]) {
    .x-button {
      inline-size: theme("spacing.6");
      block-size: theme("spacing.6");
    }
  }

  :host([scale="l"]) {
    .x-button {
      inline-size: theme("spacing.8");
      block-size: theme("spacing.8");
    }
  }

  .x-button {
    @apply appearance-none bg-transparent border-2 content-center cursor-pointer flex focus-base items-center justify-center m-0 self-center text-color-3 transition-default;

    border-radius: 50%;
    border-color: transparent;
    background-color: var(--calcite-color-foreground-2);

    &:active,
    &:hover {
      @apply text-color-1;
      background-color: var(--calcite-color-foreground-3);
    }

    &:active {
      @apply border-solid;
      border-color: theme("borderColor.color-brand");
    }

    & calcite-icon {
      color: inherit;
    }
  }
}

@mixin close-button(
  $size: "var(--calcite-internal-close-size, 1.5rem /* 24px */)",
  $padding: "0",
  $color: "var(--calcite-close-icon-color, var(--calcite-color-text-1))"
) {
  .close {
    @apply border-none
      cursor-pointer
      focus-base
      items-center
      m-0
      rounded-half
      transition-default;

    background-color: var(--calcite-close-background-color, var(--calcite-color-transparent));
    -webkit-appearance: none;
    display: flex;
    align-content: center;
    justify-content: center;
    color: #{$color};
    block-size: #{$size};
    inline-size: #{$size};
    padding: #{$padding};

    &:hover,
    &:focus {
      background-color: var(--calcite-close-background-color-hover, var(--calcite-color-transparent-hover));
    }
    &:focus {
      @apply focus-inset;
    }
    &:active {
      background-color: var(--calcite-close-background-color-press, var(--calcite-color-transparent-press));
    }

    calcite-icon {
      color: inherit;
    }
  }
}

// we explicitly list these properties to avoid animating properties that are not intended to be animated and that might affect performance
$common-animatable-props: "background-color, block-size, border-color, box-shadow, color, inset-block-end, inset-block-start, inset-inline-end, inset-inline-start, inset-size, opacity, outline-color, transform";

// Mixin for default component transitions with support for customization:
// - Use $extra-props to add specific properties (comma-separated string).
// - Use $target-props to replace the default base properties entirely (comma-separated string).
@mixin transition-default($target-props: $common-animatable-props, $extra-props: null) {
  $merged-props: $target-props;

  @if $extra-props != null {
    $merged-props: join($target-props, $extra-props, comma);
  }

  transition-property: #{$merged-props};
  transition-duration: var(--calcite-animation-timing);
  transition-timing-function: ease-in-out;
}

@mixin item-hidden() {
  :host([item-hidden]) {
    @apply hidden;
  }
}

// Mixin for text highlighting styles.
// - this should be used in conjunction with the `text.tsx` util.
@mixin text-highlight-item() {
  .text-match {
    background-color: transparent;
    color: inherit;
    font-weight: var(--calcite-font-weight-bold);
  }
}