.Root {
  --arrow-size: 16px;
  --indicator-size: 10px;
  position: relative;
  width: 100%;
}

.List {
  all: unset;
  list-style: none;
  display: flex;
  gap: 0.25rem;
  position: relative;

  &[data-orientation='vertical'] {
    flex-direction: column;
  }
}

.Item {
  position: relative;

  [data-variant='viewport'] & {
    position: static;
  }
}

.Trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25rem;
  border-radius: 0.375rem;

  user-select: none;
  white-space: nowrap;
  transition:
    background 150ms,
    border-color 150ms,
    color 150ms;

  background: transparent;
  border: none;
  color: var(--demo-neutral-fg);
  cursor: pointer;

  &:is(:hover, [data-state='open']):not(:disabled, [data-disabled]) {
    background: var(--demo-neutral-subtle);
  }

  &:focus-visible {
    outline: 2px solid var(--demo-coral-focus-ring);
    outline-offset: -1px;
  }

  &:is(:disabled, [data-disabled]) {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: not-allowed;
  }
}

.TriggerIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  & svg {
    width: 1rem;
    height: 1rem;
    transition: rotate 200ms ease;
  }

  [data-state='open'] > & svg {
    rotate: -180deg;
  }
}

.Link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding-inline: 1rem;
  padding-block: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  font-family: inherit;
  line-height: 1.25rem;
  border-radius: 0.375rem;

  user-select: none;
  white-space: nowrap;
  transition:
    background 150ms,
    color 150ms;

  background: transparent;
  color: var(--demo-neutral-fg);
  text-decoration: none;

  &:hover:not([data-disabled]) {
    background: var(--demo-neutral-subtle);
  }

  &:focus-visible {
    outline: 2px solid var(--demo-coral-focus-ring);
    outline-offset: -1px;
  }

  &[data-current] {
    color: var(--demo-coral-fg);
  }

  &[data-disabled] {
    opacity: 0.5;
    filter: grayscale(100%);
    cursor: not-allowed;
  }
}

.Content {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 12rem;
  width: max-content;
  margin-top: 0.5rem;
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;

  background: var(--demo-bg-popover);
  border: 1px solid var(--demo-border-emphasized);
  border-radius: 0.5rem;
  box-shadow: var(--demo-shadow-2xl);
  z-index: var(--demo-popover-z-index);
  transform-origin: top left;
  outline: none;

  &[dir='rtl'] {
    left: unset;
    right: 0;
    transform-origin: top right;
  }

  &[data-state='open'] {
    animation: scale-in 0.2s ease-out;
  }

  &[data-state='closed'] {
    animation: scale-out 0.15s ease-in;
  }
}

.ContentLink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2rem;
  padding-inline: 0.725rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.25rem;

  user-select: none;
  outline: none;
  color: inherit;
  text-decoration: none;

  &[data-highlighted] {
    background: var(--demo-neutral-subtle);
  }

  &:focus-visible {
    background: var(--demo-neutral-subtle);
  }

  &[data-disabled] {
    color: var(--demo-neutral-emphasized);
    opacity: 0.5;
  }
}

.Indicator {
  display: flex;
  justify-content: center;
  height: var(--indicator-size);
  z-index: 1;
  transition:
    translate 250ms ease,
    width 250ms ease;
  top: calc(var(--indicator-size) * -1);

  [data-variant='viewport'] & {
    top: unset;
    bottom: calc(var(--indicator-size) * -1);
  }

  &[data-orientation='horizontal'] {
    left: 0;
    translate: var(--trigger-x) 0;
    width: var(--trigger-width);
  }

  &[data-orientation='vertical'] {
    top: 0;
    translate: 0 var(--trigger-y);
    height: var(--trigger-height);
  }

  &[data-state='open'] {
    animation: fade-in 250ms ease;
  }

  &[data-state='closed'] {
    animation: fade-out 250ms ease;
  }
}

.Arrow {
  position: relative;
  top: 3px;
  width: var(--arrow-size);
  height: var(--arrow-size);
  background-color: var(--demo-bg-popover);
  rotate: 45deg;
  border-radius: 3px 0 0 0;
  border-top: 1px solid var(--demo-border-emphasized);
  border-left: 1px solid var(--demo-border-emphasized);
  box-shadow:
    0 -6px 24px -8px rgba(0, 0, 0, 0.18),
    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
}

.ViewportPositioner {
  position: absolute;
  display: flex;

  &[data-orientation='horizontal'] {
    width: 100%;
    top: 100%;
    left: 0;
  }

  &[data-orientation='vertical'] {
    height: 100%;
    top: 0;
    left: 100%;
  }

  &[data-align='start'] {
    justify-content: flex-start;
  }

  &[data-align='center'] {
    justify-content: center;
  }

  &[data-align='end'] {
    justify-content: flex-end;
  }
}

.Viewport {
  position: relative;
  top: 0;
  left: 0;

  background: var(--demo-bg-popover);
  border: 1px solid var(--demo-border-emphasized);
  transition:
    width 300ms ease,
    height 300ms ease;
  width: 100%;
  height: var(--viewport-height);
  transform-origin: top center;
  overflow: hidden;
  margin-top: var(--indicator-size);
  border-radius: 0.5rem;
  box-shadow:
    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;

  @media (min-width: 600px) {
    width: var(--viewport-width);
  }

  &[data-state='open'] {
    animation: scale-in 200ms ease;
  }

  &[data-state='closed'] {
    animation: scale-out 200ms ease;
  }
}

.ViewportContent {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  gap: 1.25rem;
  padding: 2.5rem;
  will-change: transform, opacity;

  &[data-motion='from-start'] {
    animation: from-left 250ms ease;
  }

  &[data-motion='from-end'] {
    animation: from-right 250ms ease;
  }

  &[data-motion='to-start'] {
    animation: to-left 250ms ease;
  }

  &[data-motion='to-end'] {
    animation: to-right 250ms ease;
  }
}

.ViewportLink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
  border-radius: 0.25rem;

  user-select: none;
  outline: none;
  color: inherit;
  text-decoration: none;

  &:hover {
    background: var(--demo-neutral-subtle);
  }

  &:focus-visible {
    background: var(--demo-neutral-subtle);
    outline: 2px solid var(--demo-coral-focus-ring);
    outline-offset: -1px;
  }

  &[data-disabled] {
    color: var(--demo-neutral-emphasized);
    opacity: 0.5;
  }
}

@keyframes scale-in {
  from {
    opacity: 0;
    transform: rotateX(-30deg) scale(0.9);
  }
  to {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
}

@keyframes scale-out {
  from {
    opacity: 1;
    transform: rotateX(0deg) scale(1);
  }
  to {
    opacity: 0;
    transform: rotateX(-10deg) scale(0.95);
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes from-right {
  from {
    transform: translate3d(200px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes from-left {
  from {
    transform: translate3d(-200px, 0, 0);
    opacity: 0;
  }
  to {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

@keyframes to-right {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(200px, 0, 0);
    opacity: 0;
  }
}

@keyframes to-left {
  from {
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
  to {
    transform: translate3d(-200px, 0, 0);
    opacity: 0;
  }
}
