import{n as e}from"./chunk-BneVvdWh.js";import{$ as t,C as n,S as r,Y as i,t as a,w as o}from"./dist-DtfJeYQK.js";import{t as s}from"./jsx-runtime-C2wGStra.js";import{l as c,o as l}from"./iframe-D-oZzXNK.js";import{r as u}from"./react-B8jdHdWa.js";import{t as d}from"./mdx-react-shim-8vvjMMnP.js";import{o as f,t as p}from"./dist-BUBfPDtK.js";import{r as m,t as h}from"./styled-components.browser.esm-DNcx_0lK.js";function g(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,p:`p`,pre:`pre`,...u(),...e.components};return(0,v.jsxs)(v.Fragment,{children:[(0,v.jsx)(l,{title:`Utilities/Gradient Borders`}),`
`,(0,v.jsx)(t.h1,{id:`gradient-borders`,children:`Gradient Borders`}),`
`,(0,v.jsxs)(f,{padding:[`32`,`0`],gap:`8`,direction:`column`,children:[(0,v.jsxs)(f,{gap:`8`,children:[(0,v.jsx)(y,{}),(0,v.jsx)(y,{$radius:`8px`}),(0,v.jsx)(y,{$radius:`100%`})]}),(0,v.jsxs)(f,{gap:`8`,children:[(0,v.jsx)(y,{$borderWidth:`2px`}),(0,v.jsx)(y,{$borderWidth:`2px`,$radius:`8px`}),(0,v.jsx)(y,{$borderWidth:`2px`,$radius:`100%`})]}),(0,v.jsxs)(f,{gap:`8`,children:[(0,v.jsx)(y,{$borderWidth:`4px`}),(0,v.jsx)(y,{$borderWidth:`4px`,$radius:`8px`}),(0,v.jsx)(y,{$borderWidth:`4px`,$radius:`100%`})]})]}),`
`,(0,v.jsxs)(t.p,{children:[`The gradient border utility allows you to create gradient borders with variable border width and radius.`,(0,v.jsx)(`br`,{}),`
It applies a pseudo-element (`,(0,v.jsx)(t.code,{children:`::before`}),`) with a gradient background that is masked to only show in the border area using CSS masking.`]}),`
`,(0,v.jsxs)(t.p,{children:[`Based on `,(0,v.jsx)(t.a,{href:`https://dev.to/afif/border-with-gradient-and-radius-387f`,rel:`nofollow`,children:`this CSS technique`}),`.`]}),`
`,(0,v.jsx)(t.h2,{id:`usage`,children:`Usage`}),`
`,(0,v.jsx)(t.pre,{children:(0,v.jsx)(t.code,{className:`language-css`,children:`.gradient-border(
    2px, /* border width */
    linear-gradient(red, blue), /* border color */
    papayawhip /* optional fallback color for browsers that don't support CSS masking */
);
`})}),`
`,(0,v.jsx)(t.h2,{id:`examples`,children:`Examples`}),`
`,(0,v.jsx)(t.h3,{id:`less`,children:`LESS`}),`
`,(0,v.jsx)(t.pre,{children:(0,v.jsx)(t.code,{className:`language-css`,children:`@import '~@preply/ds-web-core/dist/gradient-border/mixin.less';
@import '~@preply/ds-web-core/dist/generated/tokens.less';

.my-element {
    .gradient-border(@action-base-borderWidth, @color-border-ai-button-linearGradient);
}
`})}),`
`,(0,v.jsx)(t.h3,{id:`scss`,children:`SCSS`}),`
`,(0,v.jsx)(t.pre,{children:(0,v.jsx)(t.code,{className:`language-css`,children:`@use '~@preply/ds-web-core/dist/gradient-border/mixin.scss' as *;
@use '~@preply/ds-web-core/dist/generated/tokens.scss' as *;

.my-element {
    @include gradient-border($action-base-borderWidth, $color-border-ai-button-linearGradient);
}
`})}),`
`,(0,v.jsx)(t.h3,{id:`javascript-styled-components`,children:`JavaScript (styled-components)`}),`
`,(0,v.jsx)(t.pre,{children:(0,v.jsx)(t.code,{className:`language-tsx`,children:`import styled from 'styled-components';
import { gradientBorder, getTokenVar as t } from '@preply/ds-web-core';
import { color } from '@preply/ds-core';

const MyElement = styled.div\`
    \${gradientBorder(t(action.base.borderWidth), t(color.border.ai.button.linearGradient))}
\`;
`})})]})}function _(e={}){let{wrapper:t}={...u(),...e.components};return t?(0,v.jsx)(t,{...e,children:(0,v.jsx)(g,{...e})}):g(e)}var v,y;e((()=>{v=s(),d(),c(),m(),a(),o(),p(),y=h.div`
    width: ${n(t[48])};
    height: ${n(t[48])};
    background: ${n(i.background.primary)};
    border-radius: ${({$radius:e=0})=>e};
    ${({$borderWidth:e=1})=>r(e,n(i.border.ai.button.linearGradient))}
`}))();export{y as GradientBorder,_ as default};