.button {
  align-items: center;
  border-radius: 2.4rem;
  color: var(--color, var(--color-white));
  display: flex;
  height: 4rem;
  justify-content: center;
  overflow: hidden;
  position: relative;
  transform: translateY(100%);
  transition:
    color 1s var(--ease-out-expo),
    transform 0.6s ease;
  width: 14rem;

  &--active {
    transform: translateY(0);
  }

  &::after {
    background: var(--color, var(--color-white));
    border-radius: 50%;
    bottom: 0;
    content: '';
    display: block;
    height: 14rem;
    left: 50%;
    opacity: 0;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%) scale(0.75);
    transition:
      opacity 0.5s cubic-bezier(0.26, 1, 0.48, 1),
      transform 0.5s cubic-bezier(0.26, 1, 0.48, 1);
    width: 14rem;
    z-index: 1;
  }

  &:hover {
    transform: scale(1.05);

    &::after {
      opacity: 1;
      transform: translate(-50%, -50%) scale(1);
    }
  }

  @include media('>=desktop') {
    height: 40px;
    border-radius: 24px;
    width: 140px;

    &:after {
      border-radius: 50%;
    }
  }
}

.button__background {
  background: var(--background, var(--color-black));
  border-radius: 2.4rem;
  height: 100%;
  left: 50%;
  position: absolute;
  transform: translateX(-50%);
  transition: width 1s ease;
  width: 4rem;

  .button--active & {
    transition: width 1s 0.6s ease;
    width: 100%;
  }

  @include media('>=desktop') {
    border-radius: 24px;
    width: 40px;

    .button--active & {
      width: 100%;
    }
  }
}

.button__text {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.button__text__line {
  display: block;
  font: 1.2rem $font-anonymous;
  letter-spacing: 0.05rem;
  opacity: 0;
  position: relative;
  text-transform: uppercase;
  transform: translateY(100%);
  transition: transform 1s ease;
  z-index: 1;

  .button--active & {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity 1s 0.7s ease,
      transform 1s var(--ease-out-expo);
  }

  &::after {
    color: var(--background, var(--color-black));
    content: attr(data-text);
    left: 0;
    position: absolute;
    top: 100%;
  }

  .button:hover & {
    transform: translateY(-100%) !important;
  }

  @include media('>=desktop') {
    font-size: 12px;
    letter-spacing: 0.5px;
  }
}
