app-links {
  display: block;

  div.links-container {
    font-size: var(--font-size-small);

    &.links-container {
      padding-top: 8px;
    }

    section > ion-label {
      display: inline-block;
      padding-bottom: 6px;

      color: var(--ion-color-dark);
      font-weight: 700;
    }

    a,
    ion-router-link {
      padding: 4px 0;
      display: block;
      width: 100%;

      color: var(--ion-color-dark);
      text-decoration: none;

      &:hover,
      &.active {
        color: var(--ion-color-dark);

        border-bottom-color: transparent;
      }
    }

    div.social {
      display: flex;

      a {
        width: max-content;
      }

      ion-icon {
        color: inherit;
        font-size: 1.2rem;

        &:not(last-of-type) {
          margin-right: 8px;
        }
      }
    }
  }
}

body.dark {
  app-links {
    div.links-container {
      background: var(--ion-color-dark);

      section > ion-label,
      a,
      ion-router-link {
        color: var(--ion-color-dark-contrast);
      }
    }
  }
}
