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

@forward './token-utils';

@mixin host {
  display: #{token(display)};
  position: relative;
  outline: none;
  height: 100%;
  -webkit-tap-highlight-color: transparent;
}

@mixin base {
  @include typography.style(button);
  
  position: relative;
  display: #{token(display)};
  align-items: center;
  justify-content: center;
  gap: #{token(spacing)};
  z-index: 0;

  box-sizing: border-box;
  min-inline-size: #{token(min-width)};
  inline-size: 100%;
  border-width: #{token(border-width)};
  border-style: #{token(border-style)};
  border-color: #{token(border-color)};
  border-start-start-radius: #{token(shape-start-start)};
  border-start-end-radius: #{token(shape-start-end)};
  border-end-start-radius: #{token(shape-end-start)};
  border-end-end-radius: #{token(shape-end-end)};
  padding-block: #{token(padding-block)};
  padding-inline: #{token(padding-inline)};

  outline: none;
  user-select: none;
  -webkit-appearance: none;
  vertical-align: middle;
  text-decoration: none;
  white-space: nowrap;

  background: #{token(background)};
  color: #{token(color)};
  cursor: #{token(cursor)};

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

@mixin selected {
  @include override(background, selected-background);
  @include override(color, selected-color);
  @include override(border-color, background);
}

@mixin host-disabled {
  @include override(cursor, disabled-cursor);
}

@mixin disabled {
  @include override(background, disabled-background);
  @include override(color, disabled-color);

  opacity: #{token(disabled-opacity)};
  pointer-events: none;
}

@mixin selected-disabled {
  @include override(background, selected-disabled-background);
}
