.siteHeaderNav {
  height: var(--site-header-nav-height);
  font-weight: 500;
  box-shadow: 0 2px 4px 0 var(--site-header-sh, transparent);
  position: relative;
}

.siteHeaderTalkWithSalesButton {
  background-color: #5a17ee;
  border-radius: 8px;
  padding: 0.5625rem 1rem;
  color: #fff;
}

.dropMenuTrigger {
  // custom button styling
  &[class~='btn'] {
    --rgb-bg-enter: var(--rgb-ui-2);
    --rgb-bg-active: var(--rgb-ui-3);
    --rgb-fg: var(--rgb-bg-11);
    --rgb-fg-enter: var(--rgb-ui-11);
    --rgb-fg-active: var(--rgb-ui-12);
    border-color: transparent;
    padding: 0 1em;
    border-radius: 8px;
    box-shadow: var(--ring-shadow, 0 0 transparent), var(--drop-shadow, 0 0 transparent);
    --ring-shadow: 0 0 0 var(--ring-width, 4px) rgba(var(--ring-rgb), var(--ring-alpha, 1));
    --ring-alpha: 0;
    --ring-rgb: var(--bd-rgb);
    &[class~='btn-solid'] {
      // TODO: use --bg-is-dark variable to determine these styles; should be white button on dark bg
      --rgb-bg: var(--rgb-ui-7);
      --rgb-bg-enter: var(--rgb-ui-8);
      --rgb-bg-active: var(--rgb-ui-9);
      --rgb-fg: var(--rgb-bg-1);
      --rgb-fg-enter: var(--rgb-ui-2);
      --rgb-fg-active: var(--rgb-ui-3);
    }
  }
}

.dropMenuLink {
  &[class~='link'] {
    --rgb-fg: var(--rgb-fg-11);
    --rgb-bg-enter: var(--rgb-ui-2);
    --rgb-bg-active: var(--rgb-ui-3);
    text-decoration: none;
    display: block;
    padding: 0.4em calc(var(--column-gap) / 2);
    margin: 0 calc(var(--column-gap) / -2);
    border-left: 3px solid transparent;
    &:enter {
      --bg-alpha: 1;
    }
    &:focus {
      outline: 0;
    }
    &:hover,
    &:focus-visible {
      text-decoration: none;
      border-left: 3px solid rgb(var(--rgb-ui));
    }
  }
}