import { n as css, o as resetStyles, q as elementStyles, t as i, u as b } from './swap-module.js';
import { n, c as customElement } from './p-Df1VvUwe.js';

var styles = css `
  button {
    border: none;
    background: transparent;
    height: 20px;
    padding: ${({ spacing }) => spacing[2]};
    column-gap: ${({ spacing }) => spacing[1]};
    border-radius: ${({ borderRadius }) => borderRadius[1]};
    padding: 0 ${({ spacing }) => spacing[1]};
    border-radius: ${({ spacing }) => spacing[1]};
  }

  /* -- Variants --------------------------------------------------------- */
  button[data-variant='accent'] {
    color: ${({ tokens }) => tokens.core.textAccentPrimary};
  }

  button[data-variant='secondary'] {
    color: ${({ tokens }) => tokens.theme.textSecondary};
  }

  /* -- Focus states --------------------------------------------------- */
  button:focus-visible:enabled {
    box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.2);
  }

  button[data-variant='accent']:focus-visible:enabled {
    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
  }

  button[data-variant='secondary']:focus-visible:enabled {
    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
  }

  /* -- Hover & Active states ----------------------------------------------------------- */
  button[data-variant='accent']:hover:enabled {
    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
  }

  button[data-variant='secondary']:hover:enabled {
    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
  }

  button[data-variant='accent']:focus-visible {
    background-color: ${({ tokens }) => tokens.core.foregroundAccent010};
  }

  button[data-variant='secondary']:focus-visible {
    background-color: ${({ tokens }) => tokens.theme.foregroundSecondary};
    box-shadow: 0px 0px 0px 4px rgba(9, 136, 240, 0.2);
  }

  button[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
  }
`;

var __decorate = (undefined && undefined.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const TEXT_VARIANT_BY_SIZE = {
    sm: 'sm-medium',
    md: 'md-medium'
};
const TEXT_COLOR_BY_VARIANT = {
    accent: 'accent-primary',
    secondary: 'secondary'
};
let WuiLink = class WuiLink extends i {
    constructor() {
        super(...arguments);
        this.size = 'md';
        this.disabled = false;
        this.variant = 'accent';
        this.icon = undefined;
    }
    render() {
        return b `
      <button ?disabled=${this.disabled} data-variant=${this.variant}>
        <slot name="iconLeft"></slot>
        <wui-text
          color=${TEXT_COLOR_BY_VARIANT[this.variant]}
          variant=${TEXT_VARIANT_BY_SIZE[this.size]}
        >
          <slot></slot>
        </wui-text>
        ${this.iconTemplate()}
      </button>
    `;
    }
    iconTemplate() {
        if (!this.icon) {
            return null;
        }
        return b `<wui-icon name=${this.icon} size="sm"></wui-icon>`;
    }
};
WuiLink.styles = [resetStyles, elementStyles, styles];
__decorate([
    n()
], WuiLink.prototype, "size", void 0);
__decorate([
    n({ type: Boolean })
], WuiLink.prototype, "disabled", void 0);
__decorate([
    n()
], WuiLink.prototype, "variant", void 0);
__decorate([
    n()
], WuiLink.prototype, "icon", void 0);
WuiLink = __decorate([
    customElement('wui-link')
], WuiLink);
//# sourceMappingURL=p-C3IK0dJE.js.map

//# sourceMappingURL=p-C3IK0dJE.js.map