import React from 'react';
import {createComponent} from '@lit-labs/react';

import {html, css, PropertyValues} from 'lit';
import {property} from 'lit/decorators.js';
import {classMap} from 'lit/directives/class-map.js';
import {styleMap} from 'lit/directives/style-map.js';
import {TiniElement, partMap, PartInfo, VaryGroups, generateColorVaries, generateGradientVaries, generateScaleVaries} from 'tinijs';
export class IconReadmeComponent extends TiniElement {
  static readonly defaultTagName = 'icon-readme';
  static styles = css`:host{--icon-width:var(--scale-md-2x);--icon-height:var(--scale-md-2x);--icon-scheme:none;--icon-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1NzYgNTEyIj48cGF0aCBkPSJNNTI4LjMgNDYuNUgzODguNWMtNDguMSAwLTg5LjkgMzMuMy0xMDAuNCA4MC4zLTEwLjYtNDctNTIuMy04MC4zLTEwMC40LTgwLjNINDhjLTI2LjUgMC00OCAyMS41LTQ4IDQ4djI0NS44YzAgMjYuNSAyMS41IDQ4IDQ4IDQ4aDg5LjdjMTAyLjIgMCAxMzIuNyAyNC40IDE0Ny4zIDc1IC43IDIuOCA1LjIgMi44IDYgMCAxNC43LTUwLjYgNDUuMi03NSAxNDcuMy03NUg1MjhjMjYuNSAwIDQ4LTIxLjUgNDgtNDhWOTQuNmMwLTI2LjQtMjEuMy00Ny45LTQ3LjctNDguMXpNMjQyIDMxMS45YzAgMS45LTEuNSAzLjUtMy41IDMuNUg3OC4yYy0xLjkgMC0zLjUtMS41LTMuNS0zLjVWMjg5YzAtMS45IDEuNS0zLjUgMy41LTMuNWgxNjAuNGMxLjkgMCAzLjUgMS41IDMuNSAzLjV2MjIuOXptMC02MC45YzAgMS45LTEuNSAzLjUtMy41IDMuNUg3OC4yYy0xLjkgMC0zLjUtMS41LTMuNS0zLjV2LTIyLjljMC0xLjkgMS41LTMuNSAzLjUtMy41aDE2MC40YzEuOSAwIDMuNSAxLjUgMy41IDMuNVYyNTF6bTAtNjAuOWMwIDEuOS0xLjUgMy41LTMuNSAzLjVINzguMmMtMS45IDAtMy41LTEuNS0zLjUtMy41di0yMi45YzAtMS45IDEuNS0zLjUgMy41LTMuNWgxNjAuNGMxLjkgMCAzLjUgMS41IDMuNSAzLjV2MjIuOXptMjU5LjMgMTIxLjdjMCAxLjktMS41IDMuNS0zLjUgMy41SDMzNy41Yy0xLjkgMC0zLjUtMS41LTMuNS0zLjV2LTIyLjljMC0xLjkgMS41LTMuNSAzLjUtMy41aDE2MC40YzEuOSAwIDMuNSAxLjUgMy41IDMuNXYyMi45em0wLTYwLjljMCAxLjktMS41IDMuNS0zLjUgMy41SDMzNy41Yy0xLjkgMC0zLjUtMS41LTMuNS0zLjVWMjI4YzAtMS45IDEuNS0zLjUgMy41LTMuNWgxNjAuNGMxLjkgMCAzLjUgMS41IDMuNSAzLjV2MjIuOXptMC02MC45YzAgMS45LTEuNSAzLjUtMy41IDMuNUgzMzcuNWMtMS45IDAtMy41LTEuNS0zLjUtMy41di0yMi44YzAtMS45IDEuNS0zLjUgMy41LTMuNWgxNjAuNGMxLjkgMCAzLjUgMS41IDMuNSAzLjVWMTkweiIvPjwvc3ZnPg==');display:inline-block}i{display:flex;align-items:center;justify-content:center;background-image:var(--icon-image);background-repeat:no-repeat;background-size:contain;background-position:center;width:var(--icon-width);height:var(--icon-height)}.scheme{background:var(--icon-scheme);-webkit-mask-image:var(--icon-image);-webkit-mask-size:var(--icon-width) var(--icon-height);-webkit-mask-repeat:no-repeat;-webkit-mask-position:center;mask-image:var(--icon-image);mask-size:var(--icon-width) var(--icon-height);mask-repeat:no-repeat;mask-position:center}${generateColorVaries(({fullName, color}) => `.${fullName} {--icon-scheme: ${color};}`)}${generateGradientVaries(({fullName, gradient}) => `.${fullName} {--icon-scheme: ${gradient};}`)}${generateScaleVaries(({name, fullName}) => `.${fullName} {--icon-width: var(--scale-${name}-2x);--icon-height: var(--scale-${name}-2x);}`)}`;
  @property({type: String, reflect: true}) declare scale?: string;
  @property({type: String, reflect: true}) declare scheme?: string;
  willUpdate(changedValues: PropertyValues) { super.willUpdate(changedValues); this.extendRootClassesParts({scheme: !!this.scheme, [`${VaryGroups.Scale}-${this.scale}`]: !!this.scale, [`${VaryGroups.Scheme}-${this.scheme}`]: !!this.scheme}); }
  protected render() { return html`<i part=${partMap(this.rootClassesParts)} class=${classMap(this.rootClassesParts)} style=${styleMap(this.rootStyles)}></i>`; }
}
    

export const IconReadme = createComponent({
  tagName: IconReadmeComponent.defaultTagName,
  elementClass: IconReadmeComponent,
  react: React,
});
