flyonui/components/link.css

The easiest, free and open-source Tailwind CSS component library with semantic classes.

/*! 🚀 flyonui 2.4.0 - MIT License */ @layer utilities{.link{--link-color:color-mix(in oklab,var(--color-base-content)80%,#0000);cursor:pointer;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--link-color);text-decoration-line:underline;display:inline-block;&:hover{color:color-mix(in oklab,var(--link-color)80%,#000)}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}&.disabled,&[disabled],&:disabled{pointer-events:none;opacity:.5}}.link:where(.link-hover){text-decoration-line:none;@media (hover:hover){&:hover{@media (hover:hover){text-decoration-line:underline}}}}.link:where(.link-animated){text-decoration-line:none;position:relative;&:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);width:100%;height:1px;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));content:var(--tw-content);--tw-duration:.3s;content:var(--tw-content);--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);inset-inline-start:0;content:var(--tw-content);--tw-content:"";content:var(--tw-content);background-color:currentColor;position:absolute;bottom:0}}.link:where(.link-animated):before{transform-origin:100%;transform:scaleX(0)}.link:where(.link-animated):hover:before{transform-origin:0%;transform:scale(1)}.link-primary{--link-color:var(--color-primary)}.link-secondary{--link-color:var(--color-secondary)}.link-accent{--link-color:var(--color-accent)}.link-neutral{--link-color:var(--color-neutral)}.link-success{--link-color:var(--color-success)}.link-info{--link-color:var(--color-info)}.link-warning{--link-color:var(--color-warning)}.link-error{--link-color:var(--color-error)}@media (width>=640px){.sm\:link{--link-color:color-mix(in oklab,var(--color-base-content)80%,#0000);cursor:pointer;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--link-color);text-decoration-line:underline;display:inline-block;&:hover{color:color-mix(in oklab,var(--link-color)80%,#000)}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}&.disabled,&[disabled],&:disabled{pointer-events:none;opacity:.5}}.sm\:link:where(.link-hover){text-decoration-line:none;@media (hover:hover){&:hover{@media (hover:hover){text-decoration-line:underline}}}}.sm\:link:where(.link-animated){text-decoration-line:none;position:relative;&:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);width:100%;height:1px;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));content:var(--tw-content);--tw-duration:.3s;content:var(--tw-content);--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);inset-inline-start:0;content:var(--tw-content);--tw-content:"";content:var(--tw-content);background-color:currentColor;position:absolute;bottom:0}}.sm\:link:where(.link-animated):before{transform-origin:100%;transform:scaleX(0)}.sm\:link:where(.link-animated):hover:before{transform-origin:0%;transform:scale(1)}.sm\:link-primary{--link-color:var(--color-primary)}.sm\:link-secondary{--link-color:var(--color-secondary)}.sm\:link-accent{--link-color:var(--color-accent)}.sm\:link-neutral{--link-color:var(--color-neutral)}.sm\:link-success{--link-color:var(--color-success)}.sm\:link-info{--link-color:var(--color-info)}.sm\:link-warning{--link-color:var(--color-warning)}.sm\:link-error{--link-color:var(--color-error)}}@media (width>=768px){.md\:link{--link-color:color-mix(in oklab,var(--color-base-content)80%,#0000);cursor:pointer;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--link-color);text-decoration-line:underline;display:inline-block;&:hover{color:color-mix(in oklab,var(--link-color)80%,#000)}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}&.disabled,&[disabled],&:disabled{pointer-events:none;opacity:.5}}.md\:link:where(.link-hover){text-decoration-line:none;@media (hover:hover){&:hover{@media (hover:hover){text-decoration-line:underline}}}}.md\:link:where(.link-animated){text-decoration-line:none;position:relative;&:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);width:100%;height:1px;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));content:var(--tw-content);--tw-duration:.3s;content:var(--tw-content);--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);inset-inline-start:0;content:var(--tw-content);--tw-content:"";content:var(--tw-content);background-color:currentColor;position:absolute;bottom:0}}.md\:link:where(.link-animated):before{transform-origin:100%;transform:scaleX(0)}.md\:link:where(.link-animated):hover:before{transform-origin:0%;transform:scale(1)}.md\:link-primary{--link-color:var(--color-primary)}.md\:link-secondary{--link-color:var(--color-secondary)}.md\:link-accent{--link-color:var(--color-accent)}.md\:link-neutral{--link-color:var(--color-neutral)}.md\:link-success{--link-color:var(--color-success)}.md\:link-info{--link-color:var(--color-info)}.md\:link-warning{--link-color:var(--color-warning)}.md\:link-error{--link-color:var(--color-error)}}@media (width>=1024px){.lg\:link{--link-color:color-mix(in oklab,var(--color-base-content)80%,#0000);cursor:pointer;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--link-color);text-decoration-line:underline;display:inline-block;&:hover{color:color-mix(in oklab,var(--link-color)80%,#000)}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}&.disabled,&[disabled],&:disabled{pointer-events:none;opacity:.5}}.lg\:link:where(.link-hover){text-decoration-line:none;@media (hover:hover){&:hover{@media (hover:hover){text-decoration-line:underline}}}}.lg\:link:where(.link-animated){text-decoration-line:none;position:relative;&:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);width:100%;height:1px;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));content:var(--tw-content);--tw-duration:.3s;content:var(--tw-content);--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);inset-inline-start:0;content:var(--tw-content);--tw-content:"";content:var(--tw-content);background-color:currentColor;position:absolute;bottom:0}}.lg\:link:where(.link-animated):before{transform-origin:100%;transform:scaleX(0)}.lg\:link:where(.link-animated):hover:before{transform-origin:0%;transform:scale(1)}.lg\:link-primary{--link-color:var(--color-primary)}.lg\:link-secondary{--link-color:var(--color-secondary)}.lg\:link-accent{--link-color:var(--color-accent)}.lg\:link-neutral{--link-color:var(--color-neutral)}.lg\:link-success{--link-color:var(--color-success)}.lg\:link-info{--link-color:var(--color-info)}.lg\:link-warning{--link-color:var(--color-warning)}.lg\:link-error{--link-color:var(--color-error)}}@media (width>=1280px){.xl\:link{--link-color:color-mix(in oklab,var(--color-base-content)80%,#0000);cursor:pointer;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--link-color);text-decoration-line:underline;display:inline-block;&:hover{color:color-mix(in oklab,var(--link-color)80%,#000)}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}&.disabled,&[disabled],&:disabled{pointer-events:none;opacity:.5}}.xl\:link:where(.link-hover){text-decoration-line:none;@media (hover:hover){&:hover{@media (hover:hover){text-decoration-line:underline}}}}.xl\:link:where(.link-animated){text-decoration-line:none;position:relative;&:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);width:100%;height:1px;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));content:var(--tw-content);--tw-duration:.3s;content:var(--tw-content);--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);inset-inline-start:0;content:var(--tw-content);--tw-content:"";content:var(--tw-content);background-color:currentColor;position:absolute;bottom:0}}.xl\:link:where(.link-animated):before{transform-origin:100%;transform:scaleX(0)}.xl\:link:where(.link-animated):hover:before{transform-origin:0%;transform:scale(1)}.xl\:link-primary{--link-color:var(--color-primary)}.xl\:link-secondary{--link-color:var(--color-secondary)}.xl\:link-accent{--link-color:var(--color-accent)}.xl\:link-neutral{--link-color:var(--color-neutral)}.xl\:link-success{--link-color:var(--color-success)}.xl\:link-info{--link-color:var(--color-info)}.xl\:link-warning{--link-color:var(--color-warning)}.xl\:link-error{--link-color:var(--color-error)}}@media (width>=1536px){.\32 xl\:link{--link-color:color-mix(in oklab,var(--color-base-content)80%,#0000);cursor:pointer;--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium);color:var(--link-color);text-decoration-line:underline;display:inline-block;&:hover{color:color-mix(in oklab,var(--link-color)80%,#000)}&:focus{--tw-outline-style:none;outline-style:none}&:focus-visible{outline-offset:2px;outline:2px solid}&.disabled,&[disabled],&:disabled{pointer-events:none;opacity:.5}}.\32 xl\:link:where(.link-hover){text-decoration-line:none;@media (hover:hover){&:hover{@media (hover:hover){text-decoration-line:underline}}}}.\32 xl\:link:where(.link-animated){text-decoration-line:none;position:relative;&:before{content:var(--tw-content);pointer-events:none;content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);content:var(--tw-content);width:100%;height:1px;transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration));content:var(--tw-content);--tw-duration:.3s;content:var(--tw-content);--tw-ease:var(--ease-in-out);transition-duration:.3s;transition-timing-function:var(--ease-in-out);inset-inline-start:0;content:var(--tw-content);--tw-content:"";content:var(--tw-content);background-color:currentColor;position:absolute;bottom:0}}.\32 xl\:link:where(.link-animated):before{transform-origin:100%;transform:scaleX(0)}.\32 xl\:link:where(.link-animated):hover:before{transform-origin:0%;transform:scale(1)}.\32 xl\:link-primary{--link-color:var(--color-primary)}.\32 xl\:link-secondary{--link-color:var(--color-secondary)}.\32 xl\:link-accent{--link-color:var(--color-accent)}.\32 xl\:link-neutral{--link-color:var(--color-neutral)}.\32 xl\:link-success{--link-color:var(--color-success)}.\32 xl\:link-info{--link-color:var(--color-info)}.\32 xl\:link-warning{--link-color:var(--color-warning)}.\32 xl\:link-error{--link-color:var(--color-error)}}}