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

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

@mixin theme-property($property, $theme, $overriding-css-custom-property) {
  $light-theme-value: map.get(variables.$theme-values, $theme + '-' + $property);
  $dark-theme-css-custom-property: --forge-inline-message-theme-#{$theme}-#{$property};

  // map the properties for 'color' back to 'color'. The differentiation between icon and font is required for the theme handling above.
  $styleName: $property;
  @if $styleName == 'font-color' or $styleName == 'icon-color' {
    $styleName: color;
  }

  $primary-override: $overriding-css-custom-property;
  $secondary-override: $dark-theme-css-custom-property;
  $default: $light-theme-value;

  #{$styleName}: $default;
  #{$styleName}: var($primary-override, var($secondary-override, $default));
}

@mixin theme-base($theme) {
  .forge-inline-message {
    @include theme-property('background', $theme, --forge-inline-message-theme-background);
    @include theme-property('font-color', $theme, --forge-inline-message-theme-on-background);

    ::slotted([slot='icon']) {
      @include theme-property('icon-color', $theme, --forge-inline-message-theme-icon);
    }
  }
}

@mixin default-theme {
  :host {
    @include theme-base('info-primary');
  }
}

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

@mixin core-styles() {
  .forge-inline-message {
    @include mdc-typography.typography(body2);
    @include theme.css-custom-property(border-radius, --forge-inline-message-border-radius, 0);

    display: flex;
    flex-direction: row;
    padding: variables.$padding;

    ::slotted([slot='icon']) {
      align-self: start;
      margin-right: 12px;
    }

    &__container {
      align-self: center;

      ::slotted([slot='title']) {
        @include mdc-typography.typography(body2);

        font-weight: 500;
        line-height: 1rem;
        margin-bottom: 8px;
      }
    }
  }
}
