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

@mixin configuration {
  @include tokens;
}

@mixin host {
  display: block;
}

@mixin base {
  @include override('input-color', #{token(text-color)}, value);
  @include override('main-content-padding-start', #{token(container-padding-inline-start)}, value);
  @include override('main-content-padding-end', #{token(container-padding-inline-end)}, value);

  display: grid;
  position: relative;
}

@mixin field-disabled {
  cursor: not-allowed;
}

@mixin field-part-disabled {
  opacity: #{token(disabled-opacity)};
}

@mixin container-background-disabled {
  background: #{token(disabled-surface-color)};
}

@mixin outline {
  position: relative;
}

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

  box-sizing: border-box;

  grid-area: container;
  align-items: center;

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

  inline-size: 100%;
  block-size: #{token(height, custom)};
}

@mixin container-background {
  position: absolute;

  transition-duration: #{token(container-animation-duration)};
  transition-property: background, outline-color;
  transition-timing-function: #{token(container-animation-timing)};

  border-radius: inherit;
  
  pointer-events: none;

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

  content: '';
}

@mixin input {
  display: flex;
  grid-area: center;

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

  color: #{token(input-color, value)};
}

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

  display: inline-flex;
  position: relative;

  gap: #{token(label-gap)};
  grid-area: label;

  block-size: fit-content;

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

@mixin label-before {
  color: #{token(required-color)};
  content: #{token(required-content)};
}

@mixin label-after {
  color: #{token(optional-color)};
  content: #{token(optional-content)};
}

@mixin popover-icon {
  isolation: isolate;
  align-items: center;

  display: flex;
  grid-area: popover-icon;

  block-size: 100%;
  padding-inline-end: #{token(popover-icon-padding-inline-end)};

  & > * {
    transition: rotate #{token(popover-icon-transition-duration)} #{token(popover-icon-transition-timing)};
  }
}

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

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

@mixin start {
  display: flex;
  grid-area: start;
  align-items: center;

  padding-inline-start: #{token(container-padding-inline-start)};
}

@mixin end {
  display: flex;
  grid-area: end;
  align-items: center;

  padding-inline-end: #{token(end-padding-inline-end)};
}

@mixin accessory {
  position: relative;
  align-items: center;
  
  display: flex;
  grid-area: accessory;

  block-size: 100%;
  padding-inline-end: #{token(accessory-padding-inline-end)};

  &::before {
    transition-duration: #{token(container-animation-duration)};
    transition-property: border-color;
    transition-timing-function: #{token(container-animation-timing)};
    
    border-inline-start-style: #{token(border-style)};
    border-inline-start-width: #{token(border-width)};
    border-inline-start-color: #{token(inner-border-color, value)};

    padding-inline-end: #{token(accessory-padding-inline-start)};
    
    block-size: 100%;

    content: '';
  }
}

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

  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;
}

@mixin reduced-motion {
  @include override('floating-animation-duration', '0s', value);
}
