.shell-side-navigation-backdrop.ng-hide {
  opacity: 0;
}

.shell-side-navigation-backdrop.ng-hide-add,
.shell-side-navigation-backdrop.ng-hide-remove {
  transition: opacity 450ms;
}

.shell-side-navigation-backdrop {
  width: 100vw;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10999;
  outline: none;
  background-color: rgba(var(--backdrop-color));
}

.shell-side-navigation-backdrop.dark-mode {
  background-color: rgba(21, 21, 21, 0.42); /* todo: use variable */
}

.shell-side-navigation {
  display: flex;
  flex: 1;
  flex-direction: row;
  background-color: rgba(var(--background-content));
  box-sizing: border-box;
  width: 100%;
  max-width: 320px;
  min-width: 320px;
  height: 100%;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  transform: translateX(320px);
  transition: transform 420ms ease;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 11000;
  border-top-left-radius: var(--default-radius);
  border-bottom-left-radius: var(--default-radius);
  overflow: hidden;
  outline: none;
  pointer-events: none;
}

.shell-side-navigation.is-visible {
  transform: translateX(0);
  pointer-events: auto;
}

.shell-side-navigation .shell-side-navigation-content {
  display: flex;
  flex: 1;
  flex-direction: column;
  max-width: 256px;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar {
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-bottom: 1px solid rgba(var(--navbar-top-background));
  width: 100%;
  min-height: var(--navbar-top-height);
  max-height: var(--navbar-top-height);
  background-color: rgba(var(--navbar-top-background));
  padding-top: env(safe-area-inset-top, 0);
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-environment {
  font-size: 8pt;
  cursor: pointer;
  color: rgba(var(--font-color));
  transition: color 420ms ease;
  padding-left: 8px;
  text-overflow: ellipsis;
  overflow: hidden;
  word-break: break-all;
  white-space: nowrap;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-environment:hover {
  color: rgba(var(--primary-color));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information,
.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-login {
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  outline: none;
  position: relative;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .ssnui-wrapper {
  height: 40px;
  position: relative;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .availability-indicator-directive {
  position: absolute;
  left: 8px;
  bottom: 0;
  outline: 2px solid rgba(var(--navbar-top-background));
  z-index: 2;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user {
  display: flex;
  flex: 1;
  flex-direction: column;
  overflow: hidden;
  margin-left: 56px;
}

.shell-side-navigation:not(.dark-mode)
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user {
  color: rgba(var(--font-color));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user
  .shell-side-navigation-user-settings {
  display: flex;
  flex-direction: column;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user
  .shell-side-navigation-user-settings
  .shell-side-navigation-user-name {
  font-size: 14pt;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user
  .shell-side-navigation-user-settings
  .shell-side-navigation-user-availability {
  font-size: 8pt;
  cursor: pointer;
  color: rgba(var(--font-color));
  transition: color 420ms ease;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user
  .shell-side-navigation-user-settings
  .shell-side-navigation-user-availability:hover {
  color: rgba(var(--primary-color));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user
  .shell-side-navigation-user-settings
  .shell-side-navigation-user-name,
.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user
  .shell-side-navigation-user-settings
  .shell-side-navigation-user-availability,
.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-information
  .shell-side-navigation-user
  .shell-side-navigation-user-email {
  text-overflow: ellipsis;
  max-width: 200px;
  overflow: hidden;
  word-break: normal;
  white-space: nowrap;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: flex-start;
  overflow-y: auto;
  overflow-x: hidden;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  .shell-side-navigation-modules-wrapper {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  .shell-side-navigation-modules-wrapper
  .shell-side-navigation-modules-divider {
  align-items: center;
  border-bottom: 1px solid rgba(var(--color-neutral-light));
  display: flex;
  font-size: 10pt;
  height: 1px;
  justify-content: center;
  line-height: 0;
  margin: 8px 0;
  overflow: visible;
  padding: 0;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  .shell-side-navigation-modules-wrapper
  .shell-side-navigation-modules-divider.has-no-content {
  border: none;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  .shell-side-navigation-modules-wrapper
  .shell-side-navigation-modules-divider:last-of-type {
  flex: 1;
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  .shell-side-navigation-modules-wrapper
  .shell-side-navigation-modules-divider
  span {
  background-color: rgba(var(--background-content));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button {
  display: flex;
  flex: 1;
  margin: 0;
  min-width: 0;
  min-height: 48px;
  max-height: 48px;
  justify-content: center;
  border-right: 4px solid transparent;
  box-sizing: border-box;
  border-radius: 0;
  padding: 0 16px;
  color: rgba(var(--font-color));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button
  md-icon {
  transition: color 420ms ease;
  color: rgba(var(--font-color));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button:hover
  md-icon {
  color: rgba(var(--primary-color));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button
  span {
  flex: 1;
  text-align: left;
  padding-left: 16px;
  font-size: 9pt;
  text-overflow: ellipsis;
  max-width: 196px;
  overflow: hidden;
  box-sizing: border-box;
  color: rgba(var(--font-color));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button[disabled]
  span,
.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button[disabled],
.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-toolbar
  .shell-side-navigation-user-login
  button[disabled],
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-logout-button[disabled],
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-login-button[disabled] {
  color: rgba(var(--font-color-disabled));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button[disabled]
  md-icon,
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-logout-button[disabled]
  md-icon,
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-login-button[disabled]
  md-icon {
  color: rgba(var(--font-color-disabled));
}

.shell-side-navigation
  .shell-side-navigation-content
  .shell-side-navigation-modules
  button.is-active {
  border-right: 4px solid rgba(var(--primary-color));
}

.shell-side-navigation .shell-side-navigation-right-spacer {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  width: 64px;
  min-width: 64px;
  max-width: 64px;
  flex: 1;
  background-color: rgba(var(--background-content-accent));
  box-sizing: content-box;
  padding-right: env(safe-area-inset-right, 0);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.dark-mode .shell-side-navigation .shell-side-navigation-right-spacer {
  background-color: rgba(var(--background-main));
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigation-right-spacer-button-wrapper {
  max-height: 93px;
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigation-right-spacer-button-wrapper
  .shell-side-navigtion-toggle-button {
  width: 64px;
  height: var(--navbar-top-height);
  min-width: 0;
  border: none;
  outline: none;
  background-color: rgba(var(--navbar-top-background));
  box-sizing: content-box;
  padding: 0;
  border-radius: 0;
  border-bottom: 1px solid rgba(var(--navbar-top-background));
  padding-top: env(safe-area-inset-top, 0);
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigation-right-spacer-button-wrapper
  .shell-side-navigtion-toggle-button
  md-icon {
  color: rgba(var(--navbar-top-icon-color));
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-info-button
  md-icon {
  color: rgba(var(--primary-color));
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-toggle-theme-button
  md-icon {
  color: rgba(var(--color-neutral-light)) !important;
  fill: rgba(var(--color-neutral-light)) !important;
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-info-button,
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-logout-button,
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-info-button,
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-login-button,
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-toggle-theme-button {
  width: 64px;
  height: 64px;
  min-width: 0;
  border: none;
  outline: none;
  margin: 8px 0 0 0;
  padding: 0;
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-logout-button:not([disabled]),
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-logout-button:not([disabled])
  md-icon {
  color: rgba(var(--color-error));
  fill: rgba(var(--color-error)) !important;
}

.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-login-button:not([disabled]),
.shell-side-navigation
  .shell-side-navigation-right-spacer
  .shell-side-navigtion-login-button:not([disabled])
  md-icon {
  color: rgba(var(--primary-color));
}

.shell-side-navigation-user-availability.disabled {
  pointer-events: none;
  opacity: 0.6;
}

@media (max-width: 320px) {
  .shell-side-navigation {
    border-radius: 0;
  }
}