app-navigation {
  ion-header {
    ion-toolbar {
      --background: inherit;
    }
  }

  header.ic {
    background: var(--ion-color-secondary);
    color: var(--ion-color-secondary-contrast);

    display: flex;
    justify-content: center;
    align-items: center;

    position: relative;

    a {
      vertical-align: middle;
    }

    p {
      margin: 12px 0;

      @media screen and (max-width: 540px) {
        max-width: 75vw;
        overflow: hidden;
        white-space: pre;
        text-overflow: ellipsis;
      }
    }

    ion-button {
      position: fixed;
      left: 0;
    }

    &.ios {
      ion-button {
        --padding-start: 0.72rem;
        --padding-end: 0.72rem;
      }
    }
  }

  button {
    color: black;
    cursor: pointer;

    font-weight: 400;

    user-select: none;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    position: relative;
    overflow: hidden;

    margin: 0;
    padding: 4px;
    border-radius: 4px;

    &:hover,
    &:active {
      border-bottom-color: transparent;
    }

    ion-label {
      font-size: var(--font-size-small);
      white-space: nowrap;
      min-width: 52px;
      max-width: 52px;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }

  button {
    border: none;
    font: inherit;
    background: none;

    cursor: pointer;
    pointer-events: all;
  }
}

body.dark {
  app-navigation {
    button {
      color: white;
    }
  }
}
