.c-settings-screen {
  z-index: 10;
  position: fixed;
  top: 40px;
  width: 100%;
  height: 100%;
}

.figma-light .c-settings-screen {
  background-color: rgba(0, 0, 0, 0.4);
}

.figma-dark .c-settings-screen {
  background-color: rgba(0, 0, 0, 0.65);
}

.c-settings-screen__wrapper {
  background-color: var(--figma-color-bg);
}

.c-settings-screen__items-group {
  padding: 7px 0;
  border-top: 1px solid var(--figma-color-border);
}

.c-settings-screen__items-group--one-child {
  padding: 5px 0;
}

.c-settings-screen__item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 15px 3px 16px;
  font-size: var(--base-font-size);
  color: var(--figma-color-text);
}

.c-settings-screen__item--with-toggle {
  padding-right: 8px;
}

.c-settings-screen__item-oklch-hl-decimal-precision-wrapper {
  width: 33px;
}

.c-settings-screen__item-oklch-input-order-wrapper {
  width: 58px;
}

.c-settings-screen__item--restart-message {
  height: 28px;
  padding-top: 0px;
  margin-top: -10px;
  font-size: var(--base-font-size);
}

/* We don't use --figma-color-text because it already has an opacity in it. For --figma-color-text-secondary, the contrast is not enought on light mode. */
.figma-light .c-settings-screen__item--restart-message {
  color: rgba(0, 0, 0, 0.65);
}
.figma-dark .c-settings-screen__item--restart-message {
  color: rgba(255, 255, 255, 0.7);
}
