/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use '../theme';
@use './variables';

@mixin provide-theme($theme) {
  @include theme.theme-properties(skeleton, $theme, variables.$theme-values);
}

@mixin host() {
  @include theme.css-custom-property(height, --forge-skeleton-height, variables.$default-height);
  @include theme.css-custom-property(margin, --forge-skeleton-margin, variables.$default-margin);
  @include theme.css-custom-property(border-radius, --forge-skeleton-border-radius, variables.$border-radius);
  @include theme.css-custom-property(background-color, --forge-skeleton-theme-background, variables.$background);

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

@mixin base() {
  display: block;
  width: 100%;
  height: 100%;
}

@mixin gradient() {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  background-repeat: no-repeat;
  background-image: linear-gradient(90deg, transparent, var(--forge-skeleton-theme-gradient, variables.$gradient), transparent);
  animation: loading variables.$animation-duration ease-in infinite;
}

@mixin keyframes() {
  @keyframes loading {
    25%, 100% {
      transform: translateX(100%);
    }
  }
}

@mixin avatar() {
  @include theme.css-custom-property(height, --forge-skeleton-avatar-size, variables.$avatar-size);
  @include theme.css-custom-property(width, --forge-skeleton-avatar-size, variables.$avatar-size);

  border-radius: 50%;
}

@mixin button() {
  @include theme.css-custom-property(height, --forge-skeleton-button-height, variables.$button-height);
  @include theme.css-custom-property(width, --forge-skeleton-button-width, variables.$button-width);
}

@mixin form-field() {
  @include theme.css-custom-property(height, --forge-skeleton-form-field-height, variables.$form-field-height);
  @include theme.css-custom-property(width, --forge-skeleton-form-field-width, variables.$form-field-width);
}

@mixin chip() {
  @include theme.css-custom-property(height, --forge-skeleton-chip-height, variables.$chip-height);
  @include theme.css-custom-property(width, --forge-skeleton-chip-width, variables.$chip-width);

  border-radius: 16px;
}

@mixin list-item() {
  @include theme.css-custom-property(height, --forge-skeleton-list-item-height, variables.$list-item-height);
  @include theme.css-custom-property(margin, --forge-skeleton-list-item-margin, variables.$list-item-margin);
}

@mixin text() {
  @include theme.css-custom-property(height, --forge-skeleton-text-height, variables.$text-height);
}

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

@mixin core-styles() {
  .forge-skeleton {
    @include base;

    &::after {
      @include gradient;

      content: '';
    }
  }

  @at-root {
    @include keyframes;
  }
}

@mixin host-variant-styles() {
  :host([avatar]) {
    @include avatar;
  }
  
  :host([list-item]) {
    @include list-item;
  }
  
  :host([text]) {
    @include text;
  }
  
  :host([stretch]) {
    @include stretch;
  }
  
  :host([chip]) {
    @include chip;
  }
  
  :host([button]) {
    @include button;
  }

  :host([form-field]) {
    @include form-field;
  }
}
