/*
 * Copyright 2020 The Chromium Authors
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

:host {
  user-select: none;
  padding: 4px 12px 12px;
}

.error-input {
  box-shadow: 0 0 0 1px var(--sys-color-error);
}

.error-text {
  color: var(--sys-color-error);
  padding: 6px 0;
}

.warning-input {
  --override-warning-input-color: #ffdd9e;

  box-shadow: 0 0 0 1px var(--override-warning-input-color);
}

.theme-with-dark-background .warning-input,
:host-context(.theme-with-dark-background) .warning-input {
  --override-warning-input-color: rgb(97 63 0);
}

.hide-warning {
  display: none;
}

.font-section-header {
  font-weight: normal;
  font-size: 17px;
  text-align: left;
}

.font-section-subheader {
  font-size: 12px;
  text-align: left;
  font-weight: bold;
}

.font-selector-section {
  overflow-y: auto;
  padding-bottom: 10px;
}

.font-selector-input {
  width: 204px;
  text-align-last: center;
}

.font-reset-button {
  width: 100%;
  margin-top: 10px;
}

.font-section {
  border-top: 1px solid var(--sys-color-divider);
}

select.font-editor-select {
  min-width: 50px;
  min-height: 27px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  display: none;
  margin: 0;
}

.preview-text {
  max-width: 300px;
  word-break: normal;
  overflow-wrap: anywhere;
  display: block;
}

.rendered-font-list-label {
  font-weight: bold;
  font-size: 12px;
}

.rendered-font-list {
  padding: 5px 0;
}

.shadow-editor-field {
  height: 24px;
  margin-top: 8px;
  font-size: 12px;
  flex-shrink: 0;
}

.shadow-editor-field:last-of-type {
  margin-bottom: 8px;
}

.shadow-editor-flex-field {
  display: flex;
  align-items: center;
  flex-direction: row;
}

.shadow-editor-field.shadow-editor-blur-field {
  margin-top: 40px;
}

.shadow-editor-2D-slider {
  position: absolute;
  height: 88px;
  width: 88px;
  border: 1px solid var(--divider-line);
  border-radius: 2px;
}

.shadow-editor-label {
  display: inline-block;
  width: 70px;
  height: 24px;
  line-height: 24px;
  margin-right: 8px;
  text-align: left;
}

.shadow-editor-button-left,
.shadow-editor-button-right {
  width: 74px;
  height: 24px;
  padding: 3px 7px;
  line-height: 16px;
  border: 1px solid var(--divider-line);
  color: var(--sys-color-on-surface);
  background-color: var(--sys-color-cdt-base-container);
  text-align: center;
  font-weight: 500;
}

.shadow-editor-button-left {
  border-radius: 2px 0 0 2px;
}

.shadow-editor-button-right {
  border-radius: 0 2px 2px 0;
  border-left-width: 0;
}

.shadow-editor-button-left:hover,
.shadow-editor-button-right:hover {
  box-shadow: 0 1px 1px var(--divider-line);
}

.shadow-editor-button-left:focus,
.shadow-editor-button-right:focus {
  background-color: var(--sys-color-state-focus-highlight);
}

.shadow-editor-text-input {
  width: 50px;
  margin: 8px;
  text-align: center;
  box-shadow: var(--legacy-focus-ring-inactive-shadow);
}

.spectrum-switcher {
  border-radius: 2px;
  height: 20px;
  width: 20px;
  padding: 2px;
  margin-left: 5px;
}

.spectrum-switcher:hover {
  background-color: var(--sys-color-state-hover-on-subtle);
}

.spectrum-switcher:focus-visible {
  background-color: var(--sys-color-state-focus-highlight);
}