@use "../helpers/functions" as fn;

.u-text-ellipsis,
%u-text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-layout-box-padding,
%u-layout-box-padding {
  padding: var(--cp-spacing-2xl);

  @media (max-width: 650px) {
    padding: var(--cp-spacing-xl);
  }
}

.u-asterisk {
  position: relative;
  top: fn.px-to-rem(-3);
  font-size: fn.px-to-rem(14);
  line-height: normal;

  &::after {
    content: " ";
  }
}

legend .u-asterisk,
label .u-asterisk {
  color: var(--cp-text-error-primary);
}

// Accessibility
.u-focus-outline,
%u-focus-outline {
  border-radius: fn.px-to-rem(4);

  &:focus-visible {
    position: relative;
    z-index: 2;
    outline: fn.px-to-rem(2) solid var(--cp-border-accent-solid);
  }
}

/* Scrolling Visual Cue */
.u-scrolling-visual-cue,
%u-scrolling-visual-cue {
  background:
    linear-gradient(90deg, #fff 30%, #fff0),
    linear-gradient(90deg, #fff0, #fff 70%) 0 100%,
    radial-gradient(farthest-side at 0 50%, #3e3e5b33, #3e3e5b00),
    radial-gradient(farthest-side at 100% 50%, #3e3e5b33, #3e3e5b00) 0 100%;
  background-attachment: local, local, scroll, scroll;
  background-color: var(--cp-background-primary);
  background-position: 0 0, 100%, 0 0, 100%;
  background-repeat: no-repeat;
  background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
}