.view-controls {
  --controls-fade-width: 3rem;
  position: relative;
  isolation: isolate;
  overflow: hidden;

  &::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    width: var(--controls-fade-width);
    background: linear-gradient(to left,
                                var(--color--bg-base) 0%,
                                transparent 100%);
    pointer-events: none;
    content: "";
  }
}

.view-controls__scroll {
  display: flex;
  position: relative;
  z-index: 1;
  inline-size: 100%;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: var(--space--base);
  padding-right: calc(var(--controls-fade-width) + var(--space--small));
  padding-bottom: var(--space--small);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;

  &::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
  }
}

.view-controls .control-group > .phosphor-icon {
  color: var(--color--not-a11y-icon);
}

.view-controls .control-group {
  display: flex;
  flex: 0 0 auto;
  flex-direction: row;
  gap: var(--space--x-small);
  align-items: center;
}

.view-controls .control-group + .control-group {
  position: relative;
}

.view-controls .control-group a {
  text-decoration: none;
  white-space: nowrap;
}

.view-controls .selected {
  font-weight: var(--font-weight--medium);
  color: var(--color--aaa-high-contrast-text);
}

.view-controls .selected .phosphor-icon,
.view-controls .not-selected .phosphor-icon {
  color: currentColor;
}

.view-controls .not-selected {
  color: var(--color--aa-text);

  &:hover {
    color: var(--color--aaa-text);
    text-decoration: underline;
    text-decoration-style: wavy;
    text-decoration-color: var(--color--not-a11y-icon);
    text-underline-offset: 0.5em;
  }
}