@mixin app-create-menu-theme($theme) {
  $foreground: map-get($theme, foreground);
  $accent: map-get($theme, accent);
  $primary: map-get($theme, primary);

  .app-create-menu:focus {
    outline: none;
  }

  .app-create-menu {
    width: 100%;

    .mat-raised-button {
      width: 100%;
      display: block;
      box-shadow: none !important;
      height: 37.5px;
      background-color: mat-color($accent);
      color: mat-color($primary, default-contrast) !important;
      border-radius: 4px;
      font-size: 12.7px;
      font-weight: normal;
      text-transform: uppercase;

      .mat-icon {
        width: 24px;
        height: 25px;
        color: mat-color($primary, default-contrast) !important;
      }

      &__text {
        width: 100%;
        height: 20px;
        text-align: left;
      }
    }

    &__root-menu {
      max-width: 290px !important;
      width: 290px;
      display: flex;
      align-items: center;
      justify-content: center;

      & > .mat-menu-content {
        width: 100%;
      }
    }

    &--collapsed {
      outline: none;
      color: mat-color($foreground, secondary-text);
      cursor: pointer;
      &:hover {
        color: mat-color($accent);
      }
      margin: 0;
      border: none;
      background: none;
    }

    .app-create-menu--icon {
      color: mat-color($accent);
    }

    &__sub-menu {
      .mat-menu-item {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 14px;
        color: mat-color($foreground, secondary-text);
        line-height: 48px;
        box-shadow: none;
        transform: none;
        transition: unset;
        font-weight: normal;

        &:hover {
          color: mat-color($primary);
        }
      }

      .mat-menu-item[disabled],
      .mat-menu-item[disabled]:hover {
        color: mat-color($foreground, text, 0.38);

        .mat-icon {
          color: mat-color($foreground, text, 0.38);
        }
      }
    }
  }
}
