@mixin verticalFadePseudoElements($size) {
  position: relative;

  &:before {
    content: '';
    position: absolute;
    z-index: 1;
    height: spacing($size);

    inset: 0 10px auto 0; // Right inset needed to not overlay the scrollbar
    background: linear-gradient(
      180deg,
      colorAlpha(var(--corvaui-background), 1) 0%,
      colorAlpha(var(--corvaui-background), 0) 100%
    );
  }

  &:after {
    content: '';
    position: absolute;
    z-index: 1;
    height: spacing($size);

    inset: auto 10px 0 0; // Right inset needed to not overlay the scrollbar
    background: linear-gradient(
      0deg,
      colorAlpha(var(--corvaui-background), 1) 0%,
      colorAlpha(var(--corvaui-background), 0) 100%
    );
  }
}

@mixin transparencyCheckerboard($checkerboardSize) {
  // Not theme colours
  background: #fff repeating-conic-gradient(#ccc 0% 25%, transparent 0% 50%) 50%;
  background-size: $checkerboardSize $checkerboardSize;
}

@mixin transparencyTransparentIndicator($borderWidth: 1px) {
  position: relative;

  &:before {
    content: '';
    position: absolute;
    width: 90%;
    border-radius: 2px;
    border: $borderWidth solid #ff0000; // Not a theme colour
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}