@use "./colors";
@use "./variables";

@mixin overflow-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@mixin shadow {
  box-shadow: variables.$box-shadow;
}

@mixin left-shadow {
  box-shadow: variables.$box-shadow-left;
}

@mixin right-shadow {
  box-shadow: variables.$box-shadow-right;
}

@mixin shadow-inset {
  box-shadow: variables.$box-shadow-inset;
}

$bar-width: 20px;
$gap-width: 18px;
$stripes-width: 83px;

@keyframes striped-bg-animation {
  from {
    background-position-x: 0;
  }

  to {
    background-position-x: $stripes-width;
  }
}

@mixin striped-background($color, $height) {
  background-image: linear-gradient(
    113deg,
    transparent 0,
    $color 0,
    $color $bar-width,
    transparent $bar-width,
    transparent ($bar-width + $gap-width),
    $color ($bar-width + $gap-width),
    $color ($bar-width * 2 + $gap-width),
    transparent ($bar-width * 2 + $gap-width),
    transparent ($bar-width * 2 + $gap-width * 2),
    $color ($bar-width * 2 + $gap-width * 2)
  );
  background-size: $stripes-width $height;
  background-position-y: center;
  background-repeat: repeat-x;
  animation: striped-bg-animation 2s linear infinite;
}

// For when we want an element to be visually hidden but still accessible to screen readers
// Taken from: https://www.sarasoueidan.com/blog/inclusively-hiding-and-styling-checkboxes-and-radio-buttons/
@mixin visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(100%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

// need something to look like a button but don't want to @forward the button module, this is it!
@mixin base-button {
  // base "button"
  transition: 0.2s ease-in;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: variables.$border-radius-sm;
  font-weight: 600;
  cursor: pointer;

  // sizeXS
  height: variables.$button-height-xs;
  font-size: variables.$font-size-sm;
  line-height: 15px;
  padding: 10px;
}

// looks like a buttonp[variant=link], like if you need a <Link /> to look like a button
@mixin link-text {
  @include base-button;

  // secondary
  color: colors.$grey-400;
  border: 1px solid colors.$grey-300;

  &:hover {
    border-color: colors.$grey-400;
    color: colors.$grey-500;
  }

  &:active {
    border-color: colors.$grey-500;
    color: colors.$grey-500;
  }

  // custom background (secondary button has no background)
  background-color: colors.$foreground;
}

@mixin gradient-border(
  $border-width,
  $border-color,
  $background-color: linear-gradient(to right, colors.$foreground, colors.$foreground)
) {
  // Note: Gradient borders do not work with border-radius
  // as a workaround we must use a transparent border combined with a gradient background
  // Note: The default background color of linear-gradient is necessary for padding-box to work
  background:
    $background-color padding-box,
    $border-color border-box;
  border: $border-width solid transparent;
}

$animation-length: 3s;
@mixin pulsate($animation-size, $border-radius) {
  position: relative;

  @keyframes pulsate {
    0% {
      box-shadow: 0 0 0 0 colors.$blue-300;
      opacity: 1;
    }

    100% {
      box-shadow: 0 0 0 $animation-size colors.$blue-300;
      opacity: 0;
    }
  }

  &::before,
  &::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: inherit;
    border-radius: $border-radius;
    opacity: 0.3;
    animation: pulsate $animation-length infinite;
    pointer-events: none;
  }

  &::after {
    animation-delay: calc($animation-length / 2);
  }
}
