.Input {
  width: 100%;
  box-sizing: border-box;
  padding: 0.4rem 0.5rem;
  border: var(--border-1px);
  background: 1px solid var(--color-bg);
  color: var(--color-text);
  text-align: center;
}

/* Chrome, Safari, Edge, Opera */
.Input::-webkit-outer-spin-button,
.Input::-webkit-inner-spin-button {
  margin: 0;
  appearance: none;
}

/* Firefox */
.Input[type='number'] {
  appearance: textfield;
}
.ColorInput {
  display: grid;
  border: var(--border-1px);
  border-radius: 4px;
  grid-template-columns: var(--grid-color-input-columns);
}

.ColorInput-input {
  border: none;
}

.ColorInput-input:not(:last-child) {
  border-right: var(--border-1px);
}

.ColorInput-input--hex {
  grid-column: 1 / 4;
  text-align: start;
}
.ToolTip {
  position: relative;
  display: inline-block;
}

.ToolTip-text {
  position: absolute;
  z-index: 1;
  right: 50%;
  bottom: 100%;
  display: none;
  width: max-content;
  max-width: 140px;
  padding: var(--spacing-m);
  border-radius: var(--border-radius-s);
  margin-bottom: var(--spacing-s);
  background-color: var(--color-bg-brand-transparent);
  color: var(--color-text-onbrand);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  transform: translateX(50%);
  transition: none;
  transition-delay: 0s;
}

.ToolTip-text.is-display {
  display: block;
}

.ToolTip-text.is-visible {
  opacity: 1;
  transition: visibility, opacity 0.3s ease-in-out 1s;
}

.ToolTip--immediate.is-visible {
  transition-delay: 0s;
}
.Button {
  position: relative;
  display: flex;
  width: fit-content;
  height: fit-content;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-m);
  border: var(--border-1px);
  border-radius: var(--border-radius-m);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  text-align: center;
}

.Button--primary {
  background: var(--color-bg-brand);
  color: var(--color-text-onbrand);
}

.Button--small {
  padding: 0.3rem;
}

.Button--borderless {
  padding: 0;
  border: none;
}

/* pointer: fine filters out Samsung devices, which falsely report hover */
@media (hover: hover) and (pointer: fine) {
  .Button:hover {
    background-color: var(--color-bg-hover);
  }

  .Button--primary:hover {
    background: var(--color-bg-brand-hover);
  }
}

.Button:active {
  background-color: var(--color-bg-active);
}

/* stylelint-disable-next-line plugin/selector-bem-pattern */
.Button svg {
  width: 18px;
  height: 18px;
  padding: 0;
  margin: 0;
}

/* stylelint-disable-next-line plugin/selector-bem-pattern */
.Button--small svg {
  width: 14px;
  height: 14px;
}

/* stylelint-disable-next-line plugin/selector-bem-pattern */
.Button--borderless svg {
  width: 24px;
  height: 24px;
}
.PickerCanvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}
.ColorTile {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: auto;
  box-sizing: border-box;
  border: var(--border-1px);
  border-radius: var(--border-radius-s);
  aspect-ratio: 1;
}
.Modal {
  position: fixed;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-l);
  background-color: var(--color-bg-transparent);
  cursor: pointer;
  inset: 0;
  opacity: 0;
  visibility: hidden;
}

.Modal.is-visible {
  opacity: 1;
  visibility: visible;
}

.Modal-content {
  display: flex;
  width: var(--max-width-modal);
  flex-direction: column;
  padding: var(--spacing-l);
  border-radius: var(--border-radius-l);
  background-color: var(--color-bg);
  cursor: auto;
}

.Modal-header {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  padding-bottom: var(--spacing-l);
  gap: var(--spacing-l);
}

.Modal-heading {
  margin: 0;
}
.Switch {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-m);
}

.Switch-button {
  display: inline;
  align-items: center;
  padding: 0;
  border: 1px solid #00000000;
  border-radius: 12px;
  background-color: #00000000;
  outline: none;
  transform: scale(1.0001);
}

.Switch-track {
  position: relative;
  width: 24px;
  height: 12px;
  box-sizing: border-box;
  border-radius: 12px;
  background: linear-gradient(
    90deg,
    var(--color-bg-brand, #0d99ff) 0 24px,
    var(--color-icon-tertiary, #b3b3b3) 24px 48px
  );
  background-clip: padding-box;
  background-repeat: no-repeat;
  background-size: 200% 100%;
  transition: background-position 0.1s ease-out;
}

.Switch-nub {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 10px;
  height: 10px;
  box-sizing: border-box;
  border-radius: 100%;
  background: var(--color-icon-onbrand, #ffffff);
  transition: all 0.1s ease-out;
}

.Switch-track--switchOff {
  background-position: -24px;
}

.Switch-track--switchOn {
  background-position: 0;
}

.Switch-track--switchOff .Switch-nub {
  left: 1px;
}

.Switch-track--switchOn .Switch-nub {
  left: calc(100% - 11px);
}
.ColorRowAddButton-modal {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--spacing-l);
}

.ColorRowAddButton-inputRow {
  display: grid;
  width: 100%;
  align-items: center;
  column-gap: var(--spacing-s);
  grid-template-columns: var(--size-color-tile) auto;
}
.ColorTileButton {
  width: 100%;
  padding: 0;
  border: none;
  border-radius: var(--border-radius-s);
}

.ColorTileButton.is-active {
  border: 1px solid var(--color-border-focus);
  outline-color: var(--color-border-focus);
}
.ContrastCheckerCell {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--spacing-s) 0 var(--spacing-s);
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
}

.ContrastCheckerCell--selected {
  border-right: var(--border-1px-selected);
  border-left: var(--border-1px-selected);
}
.ColorRow {
  display: grid;
  align-items: center;
  padding: var(--padding-color-row);
  column-gap: var(--spacing-color-row);
  grid-column: 1;
  grid-template-columns: var(--grid-color-row-columns);
}

.ColorRow-buttons {
  display: grid;
  column-gap: 4px;
  grid-template-columns: 1fr 1fr 1fr;
  justify-items: center;
}

.ColorRow-contrastRow {
  display: grid;
  align-self: stretch;
  padding: 0 var(--spacing-m) 0 var(--spacing-l);
  border-left: var(--border-1px);
  margin-left: var(--spacing-m);
  grid-auto-columns: var(--grid-contrast-table-columns);
  grid-auto-flow: column;
}

.ColorRow-contrastRow.is-selected {
  border-top: var(--border-1px-selected);
  border-bottom: var(--border-1px-selected);
}
.LockButton {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
}

.LockButton.is-locked {
  color: var(--color-text-brand);
}

.LockButton-text {
  font-size: var(--font-size-button);
  font-weight: 500;
  line-height: normal;
}

.LockButton-icon.is-locked {
  fill: var(--color-icon-brand);
}
.ColorTable {
  display: grid;
  grid-column: 1 / 3;
  grid-row: 2;

  /* When CSS subgrid becomes supported, the color table should use it */
  grid-template-columns: var(--grid-main-columns);
  grid-template-rows: fit-content(100%) auto;
}

.ColorTable-header {
  display: grid;
  align-items: center;
  padding: var(--padding-color-row);
  padding-top: var(--spacing-m);
  column-gap: var(--spacing-color-row);
  grid-column: 1;
  grid-template-columns: var(--grid-color-row-columns);
}

.ColorTable-lockButtonRow {
  display: grid;
  padding: 0 var(--spacing-s);
  column-gap: var(--spacing-s);
  grid-column: 2;
  grid-template-columns: var(--grid-color-input-columns);
}

.ColorTable-header > :last-child {
  justify-self: end;
}

.ColorTable-headerRight {
  display: grid;
  column-gap: 4px;
  grid-template-columns: 1fr 1fr 1fr;
}

.ColorTable-headerRight > :nth-last-child(2) {
  grid-column-start: 2;
}

.ColorTable-headerRight > :last-child {
  grid-column-start: 3;
}

.ColorTable-contrastHeader {
  display: grid;
  align-items: center;
  align-self: stretch;
  padding: var(--spacing-m) var(--spacing-m) var(--spacing-s) var(--spacing-l);
  border-left: var(--border-1px);
  margin-left: var(--spacing-m);
  grid-auto-columns: var(--grid-contrast-table-columns);
  grid-auto-flow: column;
  justify-items: center;
}

.ColorTable-contrastHeaderCell {
  display: flex;
  width: var(--size-color-tile);
  flex-direction: column;
}
.DropDown {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-m);
}

.DropDown-select {
  border: var(--border-1px);
  border-radius: var(--border-radius-s);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--font-size-label);
}
.InfoModal-p {
  margin: 0 0 var(--spacing-l);
  font-size: var(--font-size-modal);
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.PickerBall {
  position: absolute;
  top: calc(var(--radius-picker) * -1);
  left: calc(var(--radius-picker) * -1);
  width: calc(100% + var(--radius-picker) * 2);
  height: calc(100% + var(--radius-picker) * 2);
  color: var(--color-text);
  pointer-events: none;
  touch-action: none;
}
.AlphaPicker {
  position: relative;
  width: 100%;
  max-width: var(--max-size-picker);
  height: var(--height-picker);
}
.SliderPicker {
  position: relative;
  width: 100%;
  max-width: var(--max-size-picker);
  height: var(--height-picker);
}
.XYPicker {
  position: relative;
  width: 100%;
  max-width: var(--max-size-picker);
  height: auto;
  aspect-ratio: 1;
}

.XYPicker-loadingIndicator {
  position: absolute;
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.XYPicker-loadingIndicatorText {
  color: #ffffff;
  user-select: none;
}
/** @define App */

.App {
  display: grid;
  width: 100%;
  height: 100%;
  align-items: start;
  justify-content: start;

  /* Dynamic padding between 0 and X px, px number in calc is the point at which the padding is 0
  and max/(calc multiplier) determines the range in which the value ramps to max  */
  padding: 32px;
  padding-top: clamp(0px, calc((100vh - 800px) * 0.08), 32px);
  padding-left: clamp(0px, calc((100% - 800px) * 0.1875), 150px);
  grid-template-columns: var(--grid-main-columns);
  grid-template-rows: fit-content(100%) auto;
}

.App.is-plugin {
  padding: 0 0 16px;
}

.App-main {
  display: flex;
  flex-direction: column;
  align-items: start;
  border-bottom: var(--border-1px);
  grid-column: 1;
  grid-row: 1;
}

.App-header {
  display: flex;
  width: 100%;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-m);
  border-bottom: var(--border-1px);
  gap: var(--spacing-l);
}

.App-headerLeft {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-m);
}

.App-headerRight {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-l);
}

.App-pickers {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--padding-picker);
  gap: var(--spacing-l);
}

.App-mainInputs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--spacing-l);
}

.App-textInputs {
  display: grid;
  align-items: center;
  gap: var(--spacing-m);
  grid-template-columns: auto auto;
}
/** @define utilities */

.u-focusBorder:focus-visible {
  border-color: var(--color-border-focus);
  outline-color: var(--color-border-focus);
}

.u-borderNone {
  border: none;
}

.u-textAlignStart {
  text-align: start;
}

:root {
  /* Because the plugin is hosted the Figma variables are undefined by default.
     We try to get the theme from Figma in JS, but fallback colors are used in case that fails */
  --color-bg: var(--figma-color-bg, #2c2c2c);
  --color-bg-transparent: rgb(0 0 0 / 0.6);
  --color-bg-hover: var(--figma-color-bg-hover, #383838);
  --color-bg-active: var(--figma-color-bg-pressed, #383838);
  --color-bg-secondary: var(--figma-color-bg-secondary, #383838);
  --color-bg-brand: var(--figma-color-bg-brand, #0c8ce9);
  --color-bg-brand-transparent: rgb(12 140 233 / 0.75); /* #0c8ce9 */
  --color-bg-brand-hover: var(--figma-color-bg-brand-hover, #0a6dc2);
  --color-bg-brand-active: var(--figma-color-bg-brand-pressed, #0a6dc2);
  --color-border: var(--figma-color-border, #444444);
  --color-border-selected: rgb(12 140 233 / 0.4); /* #0c8ce9 */
  --color-border-focus: var(--figma-color-border-selected, #0c8ce9);
  --color-icon: var(--figma-color-icon, rgb(255 255 255 / 1));
  --color-icon-brand: var(--figma-color-icon-brand, #7cc4f8);
  --color-icon-tertiary: var(--figma-color-icon-tertiary, rgb(255 255 255 / 0.4));
  --color-switch-off: var(--figma-color-icon-tertiary, #ffffff66);
  --color-text: var(--figma-color-text, rgb(255 255 255 / 1));
  --color-text-brand: var(--figma-color-text-brand, #7cc4f8);
  --color-text-onbrand: var(--figma-color-text-onbrand, rgb(255 255 255 / 1));
  --color-border-brand: var(--figma-color-border-brand, #105cad);
  --color-border-brand-focus: var(--figma-color-border-selected-strong, #7cc4f8);

  --max-size-picker: 300px;
  --height-picker: 12px;
  --padding-picker: 18px;
  --radius-picker: calc(var(--height-picker) / 2);

  --width-main-plugin: 336px;
  --width-main-standalone: 460px;
  --width-main: var(--width-main-standalone);

  --max-width-modal: calc(var(--width-main) * 0.8);
  --size-color-tile: 24px;

  --border-radius-s: 4px;
  --border-radius-m: 6px;
  --border-radius-l: 8px;

  --font-size: 11px;
  --font-size-button: 12px;
  --font-size-label: 12px;
  --font-size-modal: 12px;

  --spacing-s: 0.3rem;
  --spacing-m: 0.5rem;
  --spacing-l: 1rem;
  --spacing-color-row: 4px;

  --padding-color-row: var(--spacing-s) var(--spacing-m);
  --margin-color-row-droptarget: var(--spacing-m);

  --border-1px: 1px solid var(--color-border);
  --border-1px-selected: 1px solid var(--color-border-selected);

  --grid-main-columns: fit-content(var(--width-main)) minmax(0, auto);
  --grid-color-input-columns: 1fr 1fr 1fr 1.5fr;
  --grid-color-row-columns: var(--size-color-tile) 4.5fr 1.8fr;
  --grid-contrast-table-columns: calc(var(--font-size) * 4 + 4px + var(--spacing-s) * 2);
}

.is-plugin {
  --width-main: var(--width-main-plugin);
  --max-width-modal: calc(var(--width-main) * 0.9);
  --grid-main-columns: var(--width-main) minmax(0, auto);
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
    'Helvetica Neue', sans-serif;
}

html::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

html::-webkit-scrollbar-track {
  background-color: var(--color-bg-secondary);
}

html::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: var(--color-icon-tertiary);
  outline: none;
}

html::-webkit-scrollbar-corner {
  background-color: var(--color-bg);
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
}

p,
input,
button,
span,
div {
  font-size: var(--font-size);
}

a {
  color: var(--color-text-brand);
}

h1 {
  font-size: 1.6em;
  font-weight: 500;
}

h2 {
  font-size: 1.3em;
  font-weight: 500;
}

label {
  font-size: var(--font-size-label);
}

ul,
ol {
  padding-inline-start: 2em;
}

svg {
  fill: var(--color-icon);
}