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

@forward './token-utils';

@mixin host {
  height: #{token(height)};
  width: #{token(width)};
  margin: #{token(margin)};
  border-radius: #{token(shape)};

  background-color: #{token(background)};
  
  position: relative;

  display: block;
  overflow: hidden;
  box-sizing: border-box;
}

@mixin base {
  display: block;
}

@mixin gradient {
  position: absolute;

  display: block;
  width: 100%;
  height: 100%;

  transform: translateX(-100%);

  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, transparent, #{token(gradient-color)}, transparent);

  animation: loading #{token(animation-duration)} ease-in infinite;
}

@mixin avatar {
  @include override(height, avatar-size);
  @include override(width, avatar-size);
  @include override(shape, avatar-shape);
}

@mixin button {
  @include override(height, button-height);
  @include override(width, button-width);
}

@mixin form-field {
  @include override(height, form-field-height);
  @include override(width, form-field-width);
}

@mixin chip {
  @include override(height, chip-height);
  @include override(width, chip-width);
  @include override(shape, chip-shape);
}

@mixin list-item {
  @include override(height, list-item-height);
  @include override(margin, list-item-margin);
}

@mixin text {
  @include override(height, text-height);
}

@mixin stretch {
  height: 100%;
  width: 100%;
}
