"use strict";
(this["webpackChunk_wavemaker_ai_foundation_css"] = this["webpackChunk_wavemaker_ai_foundation_css"] || []).push([["src_tokens_web_components_anchor_anchor_json"],{

/***/ "./src/tokens/web/components/anchor/anchor.json"
/*!******************************************************!*\
  !*** ./src/tokens/web/components/anchor/anchor.json ***!
  \******************************************************/
(module) {

module.exports = /*#__PURE__*/JSON.parse('{"anchor":{"meta":{"mapping":{"selector":{"web":".app-anchor","mobile":".app-anchor"}}},"mapping":{"color":{"@":{"value":"{color.primary.@.value}","type":"color","attributes":{"subtype":"color","description":"Sets the color of clickable links (anchor elements) that users can click to navigate to other pages or sections. This is typically a blue color to indicate the text is a link.<br>CSS variable: --wm-anchor-color"}}},"font-size":{"value":"{body.medium.font-size.value}","type":"font","attributes":{"subtype":"font-size","description":"Controls how large the text appears in clickable links. Larger values make the link text more prominent and easier to read, while smaller values make it more subtle.<br>CSS variable: --wm-anchor-font-size"}},"font-family":{"value":"{body.medium.font-family.value}","type":"font","attributes":{"subtype":"font-family","description":"Sets the typeface (font style) for clickable links. This determines whether the link text appears in Arial, Times New Roman, or other font styles.<br>CSS variable: --wm-anchor-font-family"}},"font-weight":{"value":"{body.medium.font-weight.value}","type":"font","attributes":{"subtype":"font-weight","description":"Controls how thick or bold the link text appears. \'normal\' makes it regular weight, \'bold\' makes it thicker, and numbers (100-900) provide fine control over thickness.<br>CSS variable: --wm-anchor-font-weight"}},"line-height":{"value":"{body.medium.line-height.value}","type":"font","attributes":{"subtype":"line-height","description":"Controls the vertical spacing between lines when link text wraps to multiple lines. Higher values create more space between lines for better readability.<br>CSS variable: --wm-anchor-line-height"}},"letter-spacing":{"value":"{body.medium.letter-spacing.value}","type":"font","attributes":{"subtype":"letter-spacing","description":"Controls the horizontal spacing between individual letters in link text. Positive values spread letters apart, negative values bring them closer together.<br>CSS variable: --wm-anchor-letter-spacing"}},"text-transform":{"value":"none","type":"radius","attributes":{"subtype":"text-transform","description":"Controls how the link text appears in terms of capitalization. \'none\' keeps original case, \'uppercase\' makes all letters big, \'lowercase\' makes all letters small, \'capitalize\' makes first letter of each word big.<br>CSS variable: --wm-anchor-text-transform"}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration","description":"Controls whether link text has underlines or other decorative lines. \'none\' removes underlines, \'underline\' adds a line under the text, \'line-through\' adds a line through the middle of the text.<br>CSS variable: --wm-anchor-text-decoration"}}}},"gap":{"value":"{space.1.value}","type":"space","attributes":{"subtype":"space","description":"Controls the spacing between icons and text in links. This creates visual separation between any icons (like arrows or symbols) and the link text.<br>CSS variable: --wm-anchor-gap"}},"icon":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large icons appear in links (like arrow icons or symbol icons). Larger values make icons more prominent, smaller values make them more subtle.<br>CSS variable: --wm-anchor-icon-size"}}},"image":{"size":{"value":"{icon.size.@.value}","type":"space","attributes":{"subtype":"icon-size","description":"Controls how large images appear in links (like profile pictures or thumbnails). This determines the width and height of any images used within link elements.<br>CSS variable: --wm-anchor-image-size"}},"radius":{"value":"{radius.circle.value}","type":"radius","attributes":{"subtype":"radius","description":"Controls the corner rounding of images in links. When set to \'circle\', images appear as perfect circles. Other values create rounded rectangles with different amounts of rounding.<br>CSS variable: --wm-anchor-image-radius"}}},"states":{"hover":{"color":{"@":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.hover.value})\\"","type":"color","attributes":{"subtype":"color"}}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}}}},"focus":{"color":{"@":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.focus.value})\\"","type":"color","attributes":{"subtype":"color"}}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}}}},"active":{"color":{"@":{"value":"~\\"color-mix(in srgb, {color.primary.@.value}, {color.black.@.value} {opacity.active.value})\\"","type":"color","attributes":{"subtype":"color"}}},"text":{"decoration":{"@":{"value":"none","type":"radius","attributes":{"subtype":"text-decoration"}}}}}}},"appearances":{}}}');

/***/ }

}]);