@use '../abstract/_all'; /*  deprecated no se usan */
@use '../abstract/setup';

.arrow-cover {
  height: auto;
  padding: 30px;
  position: absolute;
  bottom: 0;
  right: 0;
  color: setup.$c-primary;
  display: box;
  display: flexbox;
  display: flex;
  opacity: 1;
  -webkit-box-align: end;
  -ms-flex-align: end;
  align-items: flex-end;
  transition: opacity 0.3s ease;
  z-index: 6;
}

.arrow-cover svg {
  animation: bounce 0.8s infinite alternate;
}

.line-scrolldown {
  position: absolute;
  top: calc(100% - 120px);
  left: 50%;
  z-index: 3;
  opacity: 1;
  transform: translateX(-50%);

  &::before {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: setup.$c-primary;
    transform: translateX(-50%);
  }

  &::after {
    content: '';
    position: absolute;
    top: 40px;
    left: 50%;
    width: 1px;
    height: 0;
    border-radius: 2px;
    background: setup.$c-primary;
    transform: translateX(-50%);
    animation: stretch 1s 1.5s cubic-bezier(0.55, 0.085, 0, 0.99) forwards;
  }
}

.has-light {
  .arrow-cover {
    color: setup.$c-white;
  }

  .line-scrolldown {
    &::before {
      background: setup.$c-white;
    }

    &::after {
      background: setup.$c-white;
    }
  }
}