/**
 * @license
 * Copyright 2023 Tyler Technologies, Inc. 
 * License: Apache-2.0
 */
@use 'sass:map';
@use '@material/elevation/elevation-theme' as mdc-elevation-theme;
@use '@material/typography/typography' as mdc-typography;
@use './variables';
@use '../theme';

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

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

    &__content {
      @include content;
    }

    &--elevated {
      @include elevated;
    }

    &--open {
      @include open;
    }

    &--dot {
      @include dot;
    }
  }
}

@mixin host() {
  --forge-icon-font-size: 14px;

  display: flex;
  box-sizing: border-box;
}

@mixin host-positioned() {
  position: absolute;
  top: 0;
  left: 100%;
  transform: translateX(-1.25rem);
}

@mixin base() {
  @include mdc-typography.typography(caption);
  @include theme.css-custom-property(height, --forge-badge-height, variables.$height);
  @include theme.css-custom-property(line-height, --forge-badge-line-height, variables.$line-height);
  @include theme.css-custom-property(min-width, --forge-badge-min-width, variables.$min-width);
  @include theme.css-custom-property(max-width, --forge-badge-max-width, variables.$max-width);
  @include theme.css-custom-property(border, --forge-badge-border, none);

  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: transform 200ms ease-in-out;
  transform: scale(0);
  pointer-events: none;
  border-radius: 16px;
  padding: 0 8px;
  font-weight: 700;
}

@mixin content {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@mixin theme-property($property, $theme, $theme-mod) {
  $combined-theme: $theme + '-' + $theme-mod + '-' + $property;
  $light-theme-value: map.get(variables.$theme-values, $combined-theme);
  $dark-theme-css-custom-property: --forge-badge-theme-#{$theme}-#{$theme-mod}-#{$property};
  @include theme.css-custom-property($property, $dark-theme-css-custom-property, $light-theme-value);
}

@mixin theme-base($theme, $theme-mod) {
  .forge-badge {
    @include theme-property('background', $theme, $theme-mod);
    @include theme-property('color', $theme, $theme-mod);
  }
}

@mixin default-theme() {
  :host(:not([theme])),
  :host([theme='']) {
    @include theme-base('default', 'muted');
  }
  
  :host(:not([theme])[strong]),
  :host([theme=''][strong]) {
    @include theme-base('default', 'strong');
  }
  
  @include theme('default');
}

@mixin theme($theme: 'danger') {
  :host([theme=#{$theme}]) {
    @include theme-base($theme, 'muted');
  }
  
  :host([theme=#{$theme}][strong]) {
    @include theme-base($theme, 'strong');
  }
}

@mixin static() {
  position: static;
}

@mixin elevated() {
  @include mdc-elevation-theme.elevation(1);
}

@mixin open() {
  transform: scale(1);
}

@mixin dot() {
  height: 0.5rem;
  width: 0.5rem;
  min-width: auto;
  padding: 0;
}
