/**
 *
 * Modules
 *
 */
/**
*
* Modules
*
*/
/**
 *
 * Variables
 *
 */
/**
 *
 * Functions
 *
 */
/**
 *
 * Mixins
 *
 */
/**
 *
 * Rules
 *
 */
:host {
  background: var(--ezp-core-surface-tertiary);
  border-radius: 6px;
  box-shadow: var(--ezp-userMenu-boxShadow, 0 0 0 1px var(--ezp-black-10));
  display: block;
  opacity: var(--ezp-userMenu-opacity, 0);
  position: absolute;
  right: 0;
  top: 0;
  transform: scale(var(--ezp-userMenu-scale, 0.94, 0.94));
  transform-origin: right top;
  transition: var(--ezp-userMenu-transition, opacity var(--ezp-duration-3) var(--ezp-easing-out-quart), transform var(--ezp-duration-3) var(--ezp-easing-out-quart), visibility 0s var(--ezp-duration-3));
  visibility: var(--ezp-userMenu-visibility, hidden);
  z-index: 5;
}
:host(.is-open) {
  --ezp-userMenu-opacity: 1;
  --ezp-userMenu-scale: 1, 1;
  --ezp-userMenu-transition: opacity var(--ezp-duration-3) var(--ezp-easing-out-quart),
    transform var(--ezp-duration-3) var(--ezp-easing-out-quart), visibility 0s 0s;
  --ezp-userMenu-visibility: visible;
}

@media (prefers-color-scheme: dark) {
  :host {
    --ezp-userMenu-separator-position: inset 0 0 0 var(--hairline-width-positive);
  }
}

#header {
  align-items: center;
  box-shadow: var(--ezp-userMenu-header-boxShadowPosition, 0 1px 0 0) var(--ezp-core-outline);
  box-shadow: 0;
  display: grid;
  grid-template: auto/1fr auto;
  padding: var(--ezp-spacing-4) var(--ezp-spacing-3) var(--ezp-spacing-4) var(--ezp-spacing-4);
}

#name {
  color: var(--ezp-core-foreground-primary);
}

#close {
  margin: calc(var(--ezp-spacing-3) * -1) 0;
}

#links {
  box-shadow: var(--ezp-userMenu-links-boxShadowPosition, 0 1px 0 0) var(--ezp-core-outline);
  display: flex;
  flex-direction: column;
  padding: var(--ezp-spacing-2);
}

.link {
  align-items: center;
  background: var(--ezp-userMenu-link-background, transparent);
  border-radius: 3px;
  color: var(--ezp-core-foreground-primary);
  cursor: pointer;
  display: grid;
  gap: var(--ezp-spacing-3);
  grid-template: auto/auto 1fr;
  padding: var(--ezp-spacing-3);
  text-decoration: none;
}
.link:hover {
  --ezp-userMenu-link-background: var(--ezp-core-shade-primary);
}
.link__icon {
  color: var(--ezp-theme-solid);
  margin: calc(var(--ezp-spacing-2) * -1) 0;
}

.caption {
  color: var(--ezp-core-foreground-primary);
}

#theme {
  box-shadow: var(--ezp-userMenu-theme-boxShadowPosition, 0 1px 0 0) var(--ezp-core-outline);
  display: grid;
  gap: var(--ezp-spacing-3);
  grid-template: repeat(2, auto)/1fr;
  padding: var(--ezp-spacing-4) var(--ezp-spacing-4) var(--ezp-spacing-3);
}

#swatches {
  display: flex;
  margin: 0 calc(var(--ezp-spacing-2) * -1);
}

.swatch {
  align-items: center;
  appearance: none;
  background: var(--ezp-userMenu-swatch-background, transparent);
  border: 0;
  border-radius: 50%;
  color: var(--ezp-userMenu-swatch-color);
  cursor: var(--ezp-userMenu-swatch-cursor, pointer);
  display: flex;
  justify-content: center;
  margin: 0;
  opacity: var(--ezp-userMenu-swatch-opacity, 1);
  outline: none;
  padding: var(--ezp-spacing-2);
}
@media (hover: hover) {
  .swatch:not(.selected):hover {
    --ezp-userMenu-swatch-background: var(--ezp-userMenu-swatch-theme-translucent);
  }
  .swatch:not(.selected):active {
    --ezp-userMenu-swatch-opacity: 0.74;
  }
}
.swatch.selected {
  --ezp-userMenu-dot-boxShadowSize: 10px;
  --ezp-userMenu-swatch-background: var(--ezp-userMenu-swatch-theme-translucent);
  --ezp-userMenu-swatch-cursor: normal;
}
.swatch.selected > .dot {
  animation: dot-bounce var(--ezp-duration-2) ease-in-out;
}
.swatch--blue {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-blue-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-blue-translucent);
}
.swatch--cyan {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-cyan-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-cyan-translucent);
}
.swatch--green {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-green-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-green-translucent);
}
.swatch--teal {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-teal-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-teal-translucent);
}
.swatch--orange {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-orange-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-orange-translucent);
}
.swatch--pink {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-pink-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-pink-translucent);
}
.swatch--red {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-red-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-red-translucent);
}
.swatch--violet {
  --ezp-userMenu-swatch-theme-solid: var(--ezp-accent-violet-solid);
  --ezp-userMenu-swatch-theme-translucent: var(--ezp-accent-violet-translucent);
}

.dot {
  background: var(--ezp-userMenu-dot-background, transparent);
  border-radius: 50%;
  box-shadow: inset 0 0 0 var(--ezp-userMenu-dot-boxShadowSize, 4px) var(--ezp-userMenu-swatch-theme-solid);
  height: 18px;
  transition: box-shadow var(--ezp-duration-2);
  width: 18px;
}

#appearance {
  display: grid;
  gap: var(--ezp-spacing-3);
  grid-template: repeat(2, auto)/1fr;
  padding: var(--ezp-spacing-4) var(--ezp-spacing-4) var(--ezp-spacing-3);
}

#tabs {
  display: grid;
  grid-template: auto/repeat(3, 1fr);
  margin: 0 calc(var(--ezp-spacing-2) * -1);
}

.tab {
  --ezp-icon-height: 8px;
  align-items: center;
  appearance: none;
  background: var(--ezp-userMenu-tab-background, transparent);
  border: 0;
  border-radius: 14px;
  color: var(--ezp-userMenu-tab-color, var(--ezp-core-foreground-secondary));
  cursor: var(--ezp-userMenu-tab-cursor, pointer);
  display: flex;
  gap: var(--ezp-spacing-2);
  justify-content: center;
  margin: 0;
  outline: none;
  padding: var(--ezp-spacing-3) var(--ezp-spacing-3) var(--ezp-spacing-3) var(--ezp-spacing-2);
}
@media (hover: hover) {
  .tab:not(.selected):hover {
    --ezp-userMenu-tab-background: var(--ezp-core-shade-primary);
  }
  .tab:not(.selected):active {
    --ezp-userMenu-tab-background: var(--ezp-core-shade-secondary);
  }
}
.tab.selected {
  --ezp-userMenu-tab-background: var(--ezp-theme-translucent);
  --ezp-userMenu-tab-color: var(--ezp-theme-solid);
  --ezp-userMenu-tab-cursor: normal;
}

@keyframes dot-bounce {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(0.84, 0.84);
  }
  100% {
    transform: scale(1, 1);
  }
}