@use 'colours';

.enter {
  opacity: 0;
}

.enterActive {
  opacity: 1;
  transition: opacity 300ms;
}

.exit {
  opacity: 1;
}

.exitActive {
  opacity: 0;
  transform: scale(0.9);
  transition:
    opacity 300ms,
    transform 300ms;

  @media (prefers-reduced-motion: reduce) {
    transform: none;
    transition: opacity 300ms;
  }
}

.progress {
  animation: progress-animation;
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  animation-timing-function: linear;
  background: linear-gradient(
    90deg,
    colours.$mid-grey 50%,
    colours.$light-grey 50%
  );
  background-size: 200%;
  border-bottom-left-radius: colours.$border-radius;
  border-bottom-right-radius: colours.$border-radius;
  padding-bottom: 5px;

  @media (prefers-reduced-motion: reduce) {
    animation: none;
    padding-bottom: 0;
  }

  & > * {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    margin-bottom: 0;
  }

  &:hover,
  &:focus-within {
    animation-name: none;
    background: colours.$light-grey;
  }
}

.progress.exitActive {
  animation: none;
  background: colours.$light-grey;
}

@keyframes progress-animation {
  from {
    background-position-x: 100%;
  }

  to {
    background-position-x: 0;
  }
}
