.more-button {
  --lt: #f2f3ff;
  --chevron-pad: 2.25em;
  --chevron-offset: 1.25em;
  --chevron-dup-offset: .4em;

  display: flex;
  place-items: center;
  float: right;
  padding: .5em var(--chevron-pad) .5em 1.25em;
  line-height: .95;

  outline: none;
  font-size: 105%;
  font-style: italic;
  font-weight: bold;
  color: var(--lt);
  background: #57659c;
  box-shadow: 4px 4px 0 #1b1f26;
  border-radius: 4px 1px 4px 4px;
  text-decoration: none;
  transform: skewX(-15deg);
  transition: padding-right .4s;

  >span {
    transform: skewX(15deg);

    &:nth-child(n+2) {
      position: absolute;
      right: var(--chevron-offset);
      width: 1em;
      height: .8em;

      text-indent: -100%;
      background: var(--lt);
      mask: url(/svg/chevron.svg) right no-repeat;
      transition: right .4s;
    }
  }

  &:hover {
    padding-right: calc(var(--chevron-pad) + var(--chevron-dup-offset));

    text-decoration: none;

    >span:nth-child(n+2) {
      animation: more-chevron .7s linear .2s infinite;

      @keyframes more-chevron {
        20%, 80% {
          background: var(--lt);
        }
        50% {
          background: #c76da9;
        }
      }
    }
    >span:nth-child(n+3) {
      right: calc(var(--chevron-offset) + var(--chevron-dup-offset));

      animation-delay: .1s;
    }
    >span:nth-child(n+4) {
      right: calc(var(--chevron-offset) - var(--chevron-dup-offset));

      animation-delay: .3s;
    }
  }
  &:active {
    top: 0;
    right: 3px;
    box-shadow: 2px 2px 0 #1b1f26, inset 3px 3px 0 #1b1f26;

    >span {
      transform: skewX(15deg) translate(2px, 2px);
    }
  }
  &:visited {
    color: var(--lt);
  }
}
