.settings-menu {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  z-index: 2;
  top: var(--content-top);
  align-self: start;
  min-height: calc(100vh - var(--content-top) - var(--page-padding));
  max-height: calc(100vh - var(--content-top) - var(--page-padding));
  overflow: visible;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--shell-radius);
  box-shadow: var(--shadow);
  padding: 8px;
}

.settings-menu .anticon svg {
  width: 16px;
  height: 16px;
  display: block;
  fill: currentColor;
  stroke: currentColor;
}

.settings-menu-item {
  display: inline-flex;
  align-items: center;
  gap: var(--menu-inline-gap);
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  background: transparent !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  border-radius: 6px !important;
  color: var(--gray-700) !important;
  box-shadow: none !important;
  font-weight: 500;
  min-height: 34px;
  padding: 8px 10px;
}

.settings-menu > .menu-toggle {
  position: relative;
  width: 34px;
  min-width: 34px;
  height: 34px;
  min-height: 34px;
  padding: 8px !important;
  align-self: flex-end;
  justify-content: center;
  cursor: w-resize;
  background: transparent !important;
  border-color: transparent !important;
  color: var(--gray-700) !important;
  box-shadow: none !important;
}

.settings-menu > .menu-toggle[aria-expanded="false"] {
  cursor: e-resize;
}

.dashboard-shell.is-collapsed .settings-menu > .menu-toggle,
.settings-shell.is-collapsed .settings-menu > .menu-toggle,
.templates-shell.is-collapsed .settings-menu > .menu-toggle,
.publish-layout.is-actions-collapsed .settings-menu > .menu-toggle,
.review-layout.is-actions-collapsed .settings-menu > .menu-toggle,
.preview-layout.is-actions-collapsed .settings-menu > .menu-toggle {
  align-self: stretch;
  width: 100%;
  min-width: 0;
}

.settings-menu > .menu-toggle * {
  cursor: inherit;
}

.settings-menu > .settings-menu-item:hover,
.settings-menu > .menu-toggle:hover {
  background: var(--gray-100) !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  color: var(--text) !important;
  box-shadow: none;
  transform: none;
}

.settings-menu > .settings-menu-item:active,
.settings-menu > .menu-toggle:active {
  background: var(--gray-200) !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  transform: none;
}

.settings-menu > .settings-menu-item.is-active,
.settings-menu > .settings-menu-item[aria-current="page"] {
  background: var(--gray-50) !important;
  border: 1px solid transparent !important;
  border-color: transparent !important;
  color: var(--primary) !important;
  font-weight: 600;
}

.settings-menu > .settings-menu-item.delete-btn,
.settings-menu > .settings-menu-item.delete-btn:hover {
  color: var(--red-600) !important;
}

.settings-menu > .menu-toggle:focus-visible {
  outline: var(--outline-focus);
  outline-offset: 2px;
}

.settings-menu > .menu-toggle .menu-toggle-icon,
.settings-menu > .menu-toggle .menu-toggle-icon svg {
  width: 16px;
  height: 16px;
  display: block;
}

.settings-menu-gap-half,
.settings-menu-gap-action {
  height: 8px;
  margin: 6px 4px;
  border-top: 1px solid var(--border);
  pointer-events: none;
}

@media (max-width: 960px) {
  .settings-menu {
    padding: 6px;
    min-height: auto;
    max-height: none;
    overflow-y: visible;
  }

  .settings-menu-item {
    width: auto;
  }
}