.color-error-screen {
  display: none;
  position: relative;
  flex-direction: column;
  gap: 1em;
  align-items: center;
  justify-content: center;
  height: 200px;
  border-radius: 1em;
  border: 2px dashed var(--border-muted);
  margin: 1em 0;
  color: var(--text-muted);
}

.color-error-screen i {
  font-size: 2.5em;
  padding: .2em;
  background-color: hsla(0, 0%, 0%, 0.30);
  border-radius: 50%;
}

.color-error-screen .error-message {
  font-size: .9em;
}

.fallback-button {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  padding: .75em;
  color: var(--bg);
  font-weight: bold;
  border: none;
  outline: none;
  cursor: pointer;
  background-color: var(--text);
  border-top-left-radius: 1em;
  border-top-right-radius: 1em;
}

.color-showcase {
  display: none;
  align-items: center;
  justify-content: center;
  height: 200px;
  border-radius: 1em;
  background-color: transparent;
  padding: 1em;
  margin: 1em 0;
  border: .5px solid white;
}

.color-name-container {
  display: flex;
  min-width: 0;
  flex-direction: row;
  align-items: center;
  gap: .3em;
  border-radius: 2em;
  padding: .2em .5em;
  background-color: white;
  color: black;
}

.color-name-container .color-name {
  font-size: .85em;
  font-family: Monospace, monospace;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.color-name-container i {
  cursor: pointer;
  padding: 5px;
  border-radius: 50%;
}

.copy-button {
  position: static !important;
  right: initial !important;
  color: inherit !important;
  margin: 0 !important;
}

.results-button {
  background-color: navajowhite;
}