.dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.dropdown-trigger {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding-block: 2px;
  text-decoration: none;
}

.dropdown-trigger:hover {
  text-decoration: none;
}

nav#top-menu {
  position: relative;
  z-index: 1290;
  overflow: visible;
}

.dropdown-content {
  position: absolute;
  inset-block-start: 100%;
  inset-inline-end: 0;
  background-color: var(--oc-white);
  border: 1px solid var(--oc-gray-4);
  border-radius: 4px;
  box-shadow: 0 4px 6px rgba(var(--oc-black-rgb), 0.1);
  z-index: 1000;
  min-inline-size: 160px;
  margin-block-start: 4px;
}

#account.dropdown {
  z-index: 1300;
}

#account .dropdown-content {
  inline-size: 300px;
  max-inline-size: calc(100vw - 20px);
  margin-block-start: 0;
  z-index: 10;
  border: 1px solid var(--oc-gray-4);
  background: #fff;
  background-image: none;
  box-shadow: 0 5px 12px rgba(var(--oc-black-rgb), 0.18);
  filter: none;
  backdrop-filter: none;
}

#account .dropdown-content .user-info,
#account .dropdown-content ul,
#account .dropdown-content li,
#account .dropdown-content li a {
  background-color: #fff;
}

#account .dropdown-content li a:hover,
#account .dropdown-content li a:focus {
  background-color: var(--oc-gray-1);
}

#account .dropdown-content .user-info > span {
  display: block;
  overflow-wrap: anywhere;
}

.dropdown-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dropdown-content li a, .dropdown-content .dropdown-items a {
  display: flex;
  padding-block: 8px;
  padding-inline: 16px;
  font-weight: normal;
  margin: 0;
}

.dropdown-content li a:hover, .dropdown-content .dropdown-items a:hover {
  background-color: var(--oc-gray-1);
  color: var(--oc-blue-9);
  text-decoration: none;
}

.dropdown-divider {
  border-block-start: 1px solid var(--oc-gray-2);
}