@import "@/styles/variables.scss";
@import "@/styles/mixins.scss";

@mixin return-btn {
  position: absolute;
  bottom: 2rem;
  opacity: 0.8;
  display: flex;
  align-items: center;
  @include link-arrow($white);
  i {
    transform: rotate(180deg);
    float: left;
  }
  &:hover i {
    transform: rotate(180deg) translateX(0.5rem);
  }
  label, i {
    cursor: pointer;
  }
  &:hover {
    opacity: 1;
  }
}

.caseReturnBtn {
  @include return-btn();
  padding-left: 0.75rem;
}

.normalReturnBtn {
  @include return-btn();
}

.lowerReturnBtn {
  @include return-btn();
  bottom: 1.5rem;
}

.blogReturnBtn {
  opacity: 0.8;
  margin: auto auto 0;
  //max-width: 54rem;
  label {
    cursor: pointer;
    margin-left: auto;
    //max-width: 54rem;
  }
  display: block;
  i {
    transform: rotate(180deg);
    transition: all 0.2s;
    display: inline-block;
  }
  &:hover i {
    transform: rotate(180deg) translateX(0.5rem);
  }
  label, i {
    cursor: pointer;
  }
  &:hover {
    opacity: 1;
    color: $white !important;
  }
}