.expandingAnimation() {
  &:before {
    width: 150%;
    height: 150%;
    opacity: 1;
    border: 0.2rem solid #333;
    transition: width 450ms cubic-bezier(0.07, 0.62, 0.61, 0.3),
      height 450ms cubic-bezier(0.07, 0.62, 0.61, 0.3),
      opacity 450ms cubic-bezier(0.07, 0.62, 0.61, 0.3);
  }

  opacity: 1;
  border: 0.2rem solid #333;

  [data-theme="dark"] &,
  &.dark-mode {
    &,
    &:before {
      border: 0.2rem solid #fff;
    }
  }
}

.expanding-btn {
  position: relative;
  border: 0.2rem solid transparent;
  transition: border 300ms 300ms cubic-bezier(0.07, 0.62, 0.61, 0.3);

  &:before {
    display: block;
    content: " ";
    border: none;
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  &:hover,
  &.animated {
    .expandingAnimation();
  }

  &:focus {
    box-shadow: none;
  }
}

.expanding-btn.rounded-btn {
  &:hover {
    &:before {
      border-radius: 25px;
    }
    &:after {
      border-radius: 25px;
    }
  }
}