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 clr-input {
  background-color: var(--clr-prim-0);

  &:disabled {
    background-color: var(--clr-prim-100);
  }
}

@utility clr-selected {
  color: var(--clr-prim-999);
  background-color: var(--clr-sec-200);
}

@utility clr-btn-default {
  color: var(--clr-prim-999);
  background-color: var(--clr-prim-200);

  &:disabled {
    color: var(--clr-prim-800);
    background-color: var(--clr-prim-200);
  }

  &:hover:not(:disabled) {
    color: var(--clr-prim-999);
    background-color: var(--clr-sec-100);
  }
}

@utility clr-btn-primary {
  color: var(--clr-prim-999);
  background-color: var(--clr-sec-200);

  &:disabled {
    color: var(--clr-prim-800);
    background-color: var(--clr-prim-200);
  }

  &:focus-visible,
  .focus-frame:has(:focus-visible) {
    outline: 2px solid var(--clr-sec-600);
  }

  &:focus-visible,
  &:hover:not(:disabled) {
    color: var(--clr-sec-0);
    background-color: var(--clr-sec-600);
  }
}

@utility clr-hover {
  &:hover:not(:disabled) {
    color: var(--clr-prim-999);
    background-color: var(--clr-sec-100);
  }
}

@utility clr-outline {
  :is(&, .focus-frame):focus-visible {
    outline: 2px solid var(--clr-sec-600);
  }
}

@utility focus-frame {
  :is(.clr-outline, &):focus-visible {
    outline: 2px solid var(--clr-sec-600);
  }

  &:has(:focus-visible) {
    outline: 2px solid var(--clr-sec-600);
  }
}

@utility clr-text-default {
  opacity: 1;
  -webkit-text-fill-color: var(--clr-prim-999);
  color: var(--clr-prim-999);
}

@utility clr-text-controls {
  color: var(--clr-prim-800);
  background-color: transparent;

  &:disabled {
    color: var(--clr-prim-600);
  }
}

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

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

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

@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(--clr-sec-800);
}

@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(--clr-prim-400);
}

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