:root {
  --artifact-type: black;
  --pds-backgroundColor: rgb(var(--button-secondary));
}

@media (prefers-color-scheme: dark) {
  :root {
    --artifact-type: white;
  }
}

.workspace-switcher {
  // We redefine these variables to monkey-patch dark mode into the PDS
  // dropdown component.
  .pds-button {
    --pds-button-backgroundColor: rgb(var(--button-secondary));
    --pds-button-color: rgb(var(--button-secondary-text));
    --pds-button-borderColor: rgb(var(--button-secondary-border));

    &:hover {
      --pds-button-backgroundColor: rgb(var(--button-secondary-hover));
    }
  }
}

.workspace-switcher__dialog {
  margin-top: scale.$sm--2;
  width: auto;
  min-width: 100%;
  white-space: nowrap;

  // Pds::DropDown does not support dark mode yet, so these rules just about
  // keep it legible.
  --pds-color: black;
  --spinner-stroke: 0, 0, 0;
  --pds-button-color: rgb(var(--button-secondary-text));
  :any-link:not(.pds-button):not(.pds--external) {
    color: var(--pds-button-color);
    &:hover {
      background-color: rgb(var(--button-secondary-hover));
    }
  }
}

.workspace-switcher__link-contents {
  display: flex;
  position: relative;
  padding-left: scale.$lg-1;

  svg {
    position: absolute;
    left: -3px;
    font-size: scale.$lg--1;
    color: rgb(var(--link));
  }
}

.workspace-switcher__error-state {
  display: flex;
  align-items: center;
  position: relative;
  font-weight: 500;
  line-height: var(--pds-lineHeight--dense);
  padding-left: scale.$lg--2;

  svg {
    position: absolute;
    font-size: scale.$lg--1;
    left: -4px;
    top: -2px;
  }
}

.workspace-switcher__error-state svg {
  color: rgb(var(--error-text));
}
