/**
 * @license
 * Copyright Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '../core/styles/theme';
@use '../core/styles/typography';
@use './token-utils' as *;
@use './core.animation' as animation;
@use './core.layout' as layout;
@forward './core.animation';
@forward './core.layout';
@forward './core.shape';
@forward './core.slotted';
@forward './core.theme';

@mixin configuration {
  @include tokens;
}

@mixin host {
  display: block;
}

@mixin base {
  /* Internal custom properties */
  @include override(disableable-cursor, unset, value);
  @include override(disableable-opacity, 1, value);
  @include override(inner-border-block-size, 100%, value);
  @include override(inner-border-color, #{token(outline-color, custom)}, value);
  @include override(inner-border-color-hover, #{token(outline-color-hover, custom)}, value);
  @include override(inner-border-display, block, value);
  @include override(label-color, theme.variable(text-high), value);
  @include override(label-grid-area, 'label', value);
  @include override(multiline-inset-label-background, theme.variable(surface), value);
  @include override(multiline-inset-label-background-hover, #{token(multiline-inset-label-background, custom)}, value);
  @include override(surface-display, block, value);

  position: relative;
  display: grid;
}

@mixin disabled {
  @include override(background, disabled-background);
  @include override(disableable-cursor, not-allowed, value);
  @include override(disableable-opacity, #{token(disabled-opacity)}, value);
}

@mixin disableable($rule: 'both') {
  @if $rule == 'both' or $rule == 'opacity' {
    opacity: #{token(disableable-opacity, value)};
  }
  @if $rule == 'both' or $rule == 'cursor' {
    cursor: #{token(disableable-cursor, value)};
  }
}

@mixin hover {
  @include override(outline-color, #{token(outline-color-hover, custom)}, value);
  @include override(elevation, #{token(elevation-active, custom)}, value);
  @include override(tonal-background, tonal-background-hover);
  @include override(multiline-inset-label-tonal-background, #{token(multiline-inset-label-tonal-background-hover, custom)}, value);
  @include override(inner-border-color, #{token(inner-border-color-hover, custom)}, value);
}

@mixin focus {
  @include override(elevation, #{token(elevation-active, custom)}, value);
}

@mixin outline {
  @include disableable;
  @include animation.surface-animation(outline-color);

  position: relative;
  grid-area: main;

  inline-size: 100%;
  block-size: 100%;

  box-shadow: #{token(elevation, custom)};

  border-radius: #{token(shape)};
  outline-style: #{token(outline-style)};
  outline-width: #{token(outline-width)};
  outline-color: #{token(outline-color, custom)};
  pointer-events: none;
}

@mixin container {
  @include typography.style(body2);

  position: relative;
  display: grid;
  isolation: isolate;

  grid-area: main;
  grid-template-areas: 'start center end popover-icon accessory';
  grid-template-columns: auto 1fr auto auto auto;
  align-items: center;

  border-radius: #{token(shape)};

  inline-size: 100%;
  block-size: #{token(height)};
  overflow: hidden;
}

@mixin surface {
  @include disableable;
  @include animation.surface-animation(background);

  display: #{token(surface-display, custom)};

  grid-column: 1 / -1;
  grid-row: 1 / -1;

  border-radius: #{token(shape)};
  inline-size: 100%;
  block-size: 100%;

  background: #{token(background, custom)};

  pointer-events: none;
}

@mixin input {
  @include disableable;

  display: flex;
  grid-area: center;

  block-size: 100%;
  inline-size: 100%;

  color: theme.variable(text-high);
}

@mixin label {
  @include typography.style(label2);
  @include disableable;

  position: relative;
  display: inline-flex;
  grid-area: #{token(label-grid-area, value)};
  pointer-events: #{token(label-pointer-events, value)};

  margin-block-end: #{token(label-margin-block-end, value)};
  margin-inline-start: #{token(label-margin-inline-start, value)};
  margin-inline-end: #{token(label-margin-inline-end, value)};
  block-size: fit-content;
  overflow: hidden;

  color: #{token(label-color, custom)};

  line-height: normal;
  white-space: #{token(label-white-space, value)};
}

@mixin label-before {
  margin-inline-end: #{token(required-padding)};

  color: theme.variable(error);
  content: #{token(required-content)};
}

@mixin label-after {
  margin-inline-start: #{token(optional-padding)};

  color: inherit;
  content: #{token(optional-content)};
}

@mixin popover-icon {
  @include disableable;
  @include layout.item-padding(end, inner);

  display: flex;
  align-items: center;
  grid-area: popover-icon;
  isolation: isolate;

  block-size: 100%;

  & > * {
    transition: rotate #{token(popover-icon-transition-duration)} #{token(popover-icon-transition-timing)};
    fill: #{token(content-color, custom)};
  }
}

@mixin popover-icon-arrow {
  fill: inherit;
}

@mixin popover-target {
  position: absolute;
  inset: calc(#{token(focus-indicator-width)} * -1);
  pointer-events: none;
}

@mixin start {
  @include disableable;
  @include layout.item-padding(start, outer);

  display: flex;
  grid-area: start;
  align-items: center;

  block-size: 100%;
  max-block-size: 100%;
  min-block-size: 0;

  color: #{token(content-color, custom)};
}

@mixin end {
  @include disableable;
  @include layout.item-padding(end, outer);

  display: flex;
  grid-area: end;
  align-items: center;

  block-size: 100%;
  max-block-size: 100%;
  min-block-size: 0;

  color: #{token(content-color, custom)};
}

@mixin accessory {
  @include layout.item-padding(end, inner);

  position: relative;

  display: flex;
  grid-area: accessory;
  align-items: center;

  block-size: 100%;
  max-block-size: 100%;
  min-block-size: 0;

  color: #{token(content-color, custom)};

  &::before {
    @include disableable;
    @include animation.surface-animation(border-color);
    @include layout.item-padding(end, inner);

    display: #{token(inner-border-display, custom)};

    border-inline-start-style: solid;
    border-inline-start-width: #{token(outline-width)};
    border-inline-start-color: #{token(inner-border-color, custom)};

    block-size: #{token(inner-border-block-size, custom)};

    content: '';
  }
}

@mixin support-text {
  @include typography.style(label1);
  @include disableable;

  justify-content: space-between;

  display: grid;
  grid-template-areas: 'start end';
  grid-template-columns: 1fr auto;
  grid-area: support-text;

  margin-block-start: #{token(support-text-margin-block)};

  line-height: normal;
}

@mixin support-text-both {
  gap: #{token(support-text-gap)};
}

@mixin support-text-start {
  display: inline-block;
  grid-area: start;
}

@mixin support-text-end {
  display: inline-block;
  grid-area: end;
}
