// <!-- #region first and last button styles. -->
// <style lang="scss">
.first-last-button {
  position: absolute;
  bottom: 0;
  right: 1em;

  display: flex;
  flex-direction: column;

  .go-first {
    border-radius: 50%;
    box-shadow: 0px 0px 16px -4px #ccc;
    width: 2.2em;
    height: 2.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin-bottom: 0.2em;

    &:hover {
      background-color: #e7e7e7;
    }

    svg {
      transform: rotateX(180deg);
    }
  }

  .go-last {
    // background-color: #e7e7e7;
    border-radius: 50%;
    box-shadow: 0px 0px 16px -4px #ccc;
    width: 2.2em;
    height: 2.2em;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    &:hover {
      background-color: #e7e7e7;
    }
  }
}
// </style>
// <!-- #endregion -->