/*
 * Home link
 */

.back-button {
  text-decoration: none;
  width: 48px;
  height: 48px;
  line-height: 48px - 2px;
  text-align: center;
  display: inline-block;
  border-radius: 50%;
  transition: all 100ms linear;

  // Smaller on mobile
  @media (max-width: 480px) {
    width: 32px;
    height: 32px;
    line-height: 32px - 2;
  }

  // Colors
  &,
  &:visited {
    color: $base-mute;
  }

  // Active
  &:hover,
  &:focus {
    color: white;
    background: $base-a;
    opacity: 1;
  }

  // Icon
  &::before {
    @include ion-icon('md-arrow-back');
    font-size: 24px;
  }

  // Icon: smaller on mobile
  @media (max-width: 480px) {
    &::before {
      font-size: 16px;
    }
  }
}