ion-menu {
  --background: var(--ion-color-light);
  --ion-background-color: var(--ion-color-light);

  --border: 0px;

  ion-item-divider {
    background: var(--ion-color-light);
    color: black;
  }

  ion-header {
    ion-toolbar {
      --border-color: transparent;
    }
  }

  ion-header {
    --border: 0px;
  }

  ion-content {
    ion-list {
      ion-item-divider {
        border: 0;
        font-size: var(--font-size-small);
        --padding-top: 32px;
        --background: transparent;

        --color: var(--ion-color-medium);
        font-weight: 500;

        &:not(:first-of-type) {
          margin-top: 8px;
        }
      }

      ion-item-divider + ion-item {
        margin-top: 16px;
      }

      ion-item {
        --border-color: transparent;
        --min-height: inherit;
        font-size: var(--font-size-small);
        height: inherit;

        &.ion-activatable:not(.deck) {
          --color: black;

          ion-icon {
            color: black;
          }
        }

        ion-label {
          margin-top: 6px;
          margin-bottom: 6px;
        }

        ion-icon {
          color: inherit;
          margin: 8px 8px 8px 0;
        }

        app-avatar {
          margin: 0 8px 0 0;
        }
      }
    }

    ion-button {
      --background: var(--ion-color-primary);
      --background-focused: var(--ion-color-primary);
      --background-hover: var(--ion-color-primary);
      --color: var(--ion-color-primary-contrast);
      --color-activated: var(--ion-color-primary-contrast);
    }
  }
}

body.dark {
  ion-menu ion-content {
    --background: var(--ion-color-dark);
  }

  app-menu {
    ion-list {
      background: var(--ion-color-dark);

      ion-item.item {
        --background: transparent;
        --color: var(--ion-color-dark-contrast);

        ion-icon {
          color: var(--ion-color-dark-contrast);
        }
      }
    }
  }
}
