Macrame/public/assets/DialogComp-ByJn29_w.css

/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
button, .btn {
  cursor: pointer;
  align-items: center;
  gap: calc(var(--spacing, .25rem) * 3);
  border-radius: var(--radius-lg, .5rem);
  border-style: var(--tw-border-style);
  --tw-border-style: solid;
  height: fit-content;
  padding-inline: calc(var(--spacing, .25rem) * 4);
  padding-block: calc(var(--spacing, .25rem) * 2);
  --tw-font-weight: var(--font-weight-normal, 400);
  font-weight: var(--font-weight-normal, 400);
  --tw-tracking: var(--tracking-wide, .025em);
  letter-spacing: var(--tracking-wide, .025em);
  transition-property: all;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  border-style: solid;
  border-width: 1px;
  transition: border-color .1s ease-in-out, background-color .2s;
  display: flex;
}
:is(button, .btn):not(.button__subtle, .button__ghost):hover {
  --tw-shadow-color: var(--color-black, #000);
}
:is(button, .btn)[disabled], :is(button, .btn).disabled {
  pointer-events: none;
  cursor: not-allowed;
  opacity: .5;
}
:is(button, .btn) svg {
  width: calc(var(--spacing, .25rem) * 5);
  height: calc(var(--spacing, .25rem) * 5);
  transition-property: stroke;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
  --tw-duration: .4s;
  --tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
  transition-duration: .4s;
  transition-timing-function: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));
}
:is(button, .btn).btn__sm svg {
  width: calc(var(--spacing, .25rem) * 4);
  height: calc(var(--spacing, .25rem) * 4);
}
:is(button, .btn).btn__lg svg {
  width: calc(var(--spacing, .25rem) * 6);
  height: calc(var(--spacing, .25rem) * 6);
}
:is(button, .btn):hover {
  color: var(--color-white, #fff) !important;
}
:is(button, .btn):hover svg {
  stroke: var(--color-white, #fff) !important;
}
:is(button, .btn).btn__primary {
  border-color: var(--color-sky-100, oklch(.951 .026 236.824));
  background-color: color-mix(in oklab, var(--color-sky-100, oklch(.951 .026 236.824)) 10%, transparent);
  color: var(--color-sky-100, oklch(.951 .026 236.824));
}
:is(button, .btn).btn__primary svg {
  stroke: var(--color-sky-200, oklch(.901 .058 230.902));
}
:is(button, .btn).btn__primary:hover {
  border-color: var(--color-sky-300, oklch(.828 .111 230.318));
  background-color: color-mix(in oklab, var(--color-sky-400, oklch(.746 .16 232.661)) 40%, transparent);
}
:is(button, .btn).btn__secondary {
  border-color: var(--color-amber-100, oklch(.962 .059 95.617));
  background-color: color-mix(in oklab, var(--color-amber-100, oklch(.962 .059 95.617)) 10%, transparent);
  color: var(--color-amber-100, oklch(.962 .059 95.617));
}
:is(button, .btn).btn__secondary svg {
  stroke: var(--color-amber-300, oklch(.879 .169 91.605));
}
:is(button, .btn).btn__secondary:hover {
  border-color: var(--color-amber-400, oklch(.828 .189 84.429));
  background-color: color-mix(in oklab, var(--color-amber-400, oklch(.828 .189 84.429)) 40%, transparent);
}
:is(button, .btn).btn__danger {
  border-color: var(--color-rose-100, oklch(.941 .03 12.58));
  background-color: color-mix(in oklab, var(--color-rose-200, oklch(.892 .058 10.001)) 20%, transparent);
  color: var(--color-rose-200, oklch(.892 .058 10.001));
}
:is(button, .btn).btn__danger svg {
  stroke: var(--color-rose-400, oklch(.712 .194 13.428));
}
:is(button, .btn).btn__danger:hover {
  border-color: var(--color-rose-500, oklch(.645 .246 16.439));
  background-color: color-mix(in oklab, var(--color-rose-400, oklch(.712 .194 13.428)) 40%, transparent);
  color: var(--color-white, #fff);
}
:is(button, .btn).btn__dark {
  border-color: var(--color-slate-400, oklch(.704 .04 256.788));
  background-color: color-mix(in oklab, var(--color-slate-200, oklch(.929 .013 255.508)) 10%, transparent);
  color: var(--color-slate-100, oklch(.968 .007 247.896));
}
:is(button, .btn).btn__dark svg {
  stroke: var(--color-slate-300, oklch(.869 .022 252.894));
}
:is(button, .btn).btn__dark:hover {
  border-color: var(--color-slate-200, oklch(.929 .013 255.508));
  background-color: color-mix(in oklab, var(--color-slate-400, oklch(.704 .04 256.788)) 40%, transparent);
  color: var(--color-white, #fff);
}
:is(button, .btn).btn__success {
  border-color: var(--color-lime-100, oklch(.967 .067 122.328));
  background-color: color-mix(in oklab, var(--color-lime-200, oklch(.938 .127 124.321)) 10%, transparent);
  color: var(--color-lime-100, oklch(.967 .067 122.328));
}
:is(button, .btn).btn__success svg {
  stroke: var(--color-lime-400, oklch(.841 .238 128.85));
}
:is(button, .btn).btn__success:hover {
  border-color: var(--color-lime-500, oklch(.768 .233 130.85));
  background-color: color-mix(in oklab, var(--color-lime-400, oklch(.841 .238 128.85)) 40%, transparent);
  color: var(--color-white, #fff);
}
:is(button, .btn).btn__subtle {
  color: var(--color-white, #fff);
  background-color: #0000;
  border-color: #0000;
}
@media (hover: hover) {
:is(button, .btn).btn__subtle:hover {
    background-color: color-mix(in oklab, var(--color-white, #fff) 10%, transparent);
}
}
:is(button, .btn).btn__subtle:hover {
  border-color: color-mix(in oklab, var(--color-white, #fff) 40%, transparent);
  background-color: color-mix(in oklab, var(--color-white, #fff) 20%, transparent);
  --tw-gradient-to: color-mix(in oklab, var(--color-white, #fff) 30%, transparent);
  --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));
}
:is(button, .btn).btn__ghost {
  color: color-mix(in oklab, var(--color-white, #fff) 80%, transparent);
  background-color: #0000;
  border-color: #0000;
}
@media (hover: hover) {
:is(button, .btn).btn__ghost:hover {
    color: var(--color-white, #fff);
}
}
@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}
@property --tw-font-weight {
  syntax: "*";
  inherits: false
}
@property --tw-tracking {
  syntax: "*";
  inherits: false
}
@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}
@property --tw-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}
@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}
@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}
@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}
@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}
@property --tw-duration {
  syntax: "*";
  inherits: false
}
@property --tw-ease {
  syntax: "*";
  inherits: false
}
@property --tw-gradient-position {
  syntax: "*";
  inherits: false
}
@property --tw-gradient-from {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-via {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-to {
  syntax: "<color>";
  inherits: false;
  initial-value: #0000;
}
@property --tw-gradient-stops {
  syntax: "*";
  inherits: false
}
@property --tw-gradient-via-stops {
  syntax: "*";
  inherits: false
}
@property --tw-gradient-from-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 0%;
}
@property --tw-gradient-via-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 50%;
}
@property --tw-gradient-to-position {
  syntax: "<length-percentage>";
  inherits: false;
  initial-value: 100%;
}
/*! tailwindcss v4.0.9 | MIT License | https://tailwindcss.com */
.dialog-container {
  position: relative;
}
.dialog-container dialog {
  pointer-events: none;
  z-index: 50;
  --tw-translate-x: calc(calc(1 / 2 * 100%) * -1);
  max-width: calc(100vw - 2rem);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  --tw-translate-y: calc(calc(1 / 2 * 100%) * -1);
  translate: var(--tw-translate-x) var(--tw-translate-y);
  color: var(--color-slate-200, oklch(.929 .013 255.508));
  position: fixed;
  top: 50%;
  left: 50%;
}
.dialog-container dialog[open] {
  pointer-events: auto;
}
.dialog-container dialog::backdrop {
  background-color: color-mix(in oklab, var(--color-black, #000) 50%, transparent);
  --tw-backdrop-blur: blur(var(--blur-xs, 4px));
  -webkit-backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  backdrop-filter: var(--tw-backdrop-blur, ) var(--tw-backdrop-brightness, ) var(--tw-backdrop-contrast, ) var(--tw-backdrop-grayscale, ) var(--tw-backdrop-hue-rotate, ) var(--tw-backdrop-invert, ) var(--tw-backdrop-opacity, ) var(--tw-backdrop-saturate, ) var(--tw-backdrop-sepia, );
  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter;
  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));
  transition-duration: var(--tw-duration, var(--default-transition-duration, .15s));
}
.dialog-container dialog .dialog__close {
  top: calc(var(--spacing, .25rem) * 4);
  right: calc(var(--spacing, .25rem) * 4);
  padding: calc(var(--spacing, .25rem) * 0);
  color: var(--color-white, #fff);
  position: absolute;
}
.dialog-container dialog .dialog__close svg {
  width: calc(var(--spacing, .25rem) * 5);
  height: calc(var(--spacing, .25rem) * 5);
}
.dialog__content > :first-child {
  padding-right: calc(var(--spacing, .25rem) * 8);
}
@property --tw-translate-x {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-y {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-translate-z {
  syntax: "*";
  inherits: false;
  initial-value: 0;
}
@property --tw-backdrop-blur {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-brightness {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-contrast {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-grayscale {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-hue-rotate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-invert {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-opacity {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-saturate {
  syntax: "*";
  inherits: false
}
@property --tw-backdrop-sepia {
  syntax: "*";
  inherits: false
}