Portal/rsconcept/frontend/src/styling/utilities.css

/**
 * Module: Utility classes for style features.
 */

@utility font-main {
  font-family: var(--font-main);
}

@utility font-controls {
  font-family: var(--font-ui);
  font-weight: 700;
}

@utility font-math {
  font-family: var(--font-math);
}

@utility cc-selected {
  color: var(--color-selected-foreground);
  background-color: var(--color-selected);
}

@utility cc-hover {
  &:hover:not(:disabled) {
    background-color: var(--color-accent);
  }
}

@utility focus-outline {
  --focus-color: var(--color-ring);

  &:focus-visible {
    outline: 2px solid var(--focus-color);
    border-color: var(--focus-color);
  }

  &[aria-invalid='true'] {
    --focus-color: var(--color-destructive);
  }
}

@utility focus-frame {
  --focus-color: var(--color-ring);

  &:focus-visible,
  &:has(:focus-visible) {
    outline: 2px solid var(--focus-color);
    border-color: var(--focus-color);
  }

  &[aria-invalid='true'] {
    --focus-color: var(--color-destructive);
  }
}

@utility cc-controls {
  color: var(--color-muted-foreground);
  background-color: transparent;

  &:disabled {
    color: var(--color-muted-foreground);
    opacity: 0.75;
  }
}

@utility cc-remove {
  color: var(--color-muted-foreground);

  &:hover:not(:disabled) {
    color: var(--color-destructive);
  }
}

@utility icon-primary {
  :not([disabled]) > & {
    color: var(--color-primary);
  }
}

@utility icon-red {
  :not([disabled]) > & {
    color: var(--color-destructive);
  }
}

@utility icon-green {
  :not([disabled]) > & {
    color: var(--color-constructive);
  }
}

@utility inline-icon {
  display: inline-block;

  margin-left: 0.1rem;
  margin-right: 0.1rem;
  transform: translate(0, -0.2rem);

  font-size: 1.25rem;
  color: var(--color-primary);
}

@utility cc-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

@utility cc-icons {
  display: flex;
  gap: 0.25rem;
}

@utility cc-scroll-row {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

@utility cc-scroll-y {
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: y mandatory;
}

@utility cc-shadow-border {
  box-shadow: 0 1px 2px 0 var(--color-border);
}

@utility cc-fade-in {
  opacity: 1;

  transition-property: opacity;
  transition-timing-function: var(--ease-bezier);
  transition-duration: var(--duration-fade);

  @starting-style {
    opacity: 0;
  }
}

@utility cc-animate-position {
  transition-property: transform top left bottom right margin padding;
  transition-timing-function: var(--ease-bezier);
  transition-duration: var(--duration-move);
}

@utility cc-animate-modal {
  clip-path: inset(0% 0% 0% 0%);
  opacity: 1;

  transition-property: clip-path, opacity;
  transition-timing-function: var(--ease-bezier);
  transition-duration: var(--duration-modal);

  @starting-style {
    clip-path: inset(50% 50% 50% 50%);
    opacity: 0;
  }
}

@utility cc-animate-color {
  transition-property: color, background-color;
  transition-timing-function: var(--ease-bezier);
  transition-duration: var(--duration-select);
}

@utility cc-animate-background {
  transition-property: background-color;
  transition-timing-function: var(--ease-bezier);
  transition-duration: var(--duration-select);
}

@utility cc-mask-sides {
  --mask-border-size: 2rem;

  mask-image: linear-gradient(to top, transparent, black calc(var(--mask-border-size))),
    linear-gradient(to bottom, transparent, black calc(var(--mask-border-size))),
    linear-gradient(to left, transparent, black calc(var(--mask-border-size))),
    linear-gradient(to right, transparent, black calc(var(--mask-border-size)));

  mask-composite: intersect;
}

@utility duration-select {
  --tw-duration: var(--duration-select);
  transition-duration: var(--duration-select);
}

@utility duration-dropdown {
  --tw-duration: var(--duration-dropdown);
  transition-duration: var(--duration-dropdown);
}

@utility duration-modal {
  --tw-duration: var(--duration-modal);
  transition-duration: var(--duration-modal);
}

@utility duration-fade {
  --tw-duration: var(--duration-fade);
  transition-duration: var(--duration-fade);
}

@utility duration-move {
  --tw-duration: var(--duration-move);
  transition-duration: var(--duration-move);
}