/* [project]/src/modules/styles/rotating-border.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
    }
  }
}

@keyframes rotate {
  to {
    transform: rotate(-360deg);
  }
}

.rotating-border__inner {
  z-index: 10;
  aspect-ratio: 1;
  width: calc(var(--spacing, .25rem) * 24);
  background-color: var(--total);
  border-radius: 31px;
  place-items: center;
  display: grid;
  position: relative;
}

.rotating-border__outer {
  aspect-ratio: 1;
  width: calc(var(--spacing, .25rem) * 28);
  --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
  box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  border-radius: 34px;
  align-self: center;
  place-items: center;
  display: grid;
  position: relative;
}

.rotating-border {
  --width: 112px;
  --bg: var(--background);
  height: var(--width);
  width: var(--width);
  isolation: isolate;
  background: var(--bg);
  border-radius: 34px;
  margin: auto;
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.rotating-border:before {
  content: "";
  background-image: conic-gradient(var(--primary) 20deg, transparent 120deg);
  width: 150%;
  height: 150%;
  animation: 2s linear infinite rotate;
  position: absolute;
  top: -25%;
  left: -25%;
}

.rotating-border:after {
  content: "";
  background: var(--bg);
  border-radius: 34px;
  place-items: center;
  width: 94%;
  height: 94%;
  display: grid;
  position: absolute;
  top: 3%;
  left: 3%;
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@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;
}

/* [project]/src/modules/styles/separator.css [app-client] (css) */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-font-weight: initial;
      --tw-border-style: solid;
    }
  }
}

@keyframes yAxis {
  0% {
    top: calc(var(--delta-y-start));
  }

  to {
    top: calc(var(--delta-y)  - 20px);
    transform: scale(0);
  }
}

@keyframes xAxis {
  0% {
    left: calc(var(--delta-x-start));
  }

  to {
    left: var(--delta-x);
  }
}

.separator {
  text-align: center;
  font-family: var(--font-sans-light);
  font-size: var(--text-xs, .75rem);
  line-height: var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));
  --tw-font-weight: var(--font-weight-medium, 500);
  font-weight: var(--font-weight-medium, 500);
  color: var(--muted-foreground);
  align-items: center;
  display: flex;
}

.separator:before, .separator:after {
  content: "";
  border-bottom-style: var(--tw-border-style);
  opacity: .5;
  border-bottom-width: 1px;
  flex: 1;
}

.separator:not(:empty):before {
  margin-right: .25em;
}

.separator:not(:empty):after {
  margin-left: .25em;
}

@property --tw-font-weight {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}