/*
 * This file is part of GoTo Contact Center WebChat.
 *
 * GoTo Contact Center WebChat is free software: you can redistribute it and/or modify it under the terms of the
 * GNU General Public License as published by the Free Software Foundation, either version 3 of the License,
 * or (at your option) any later version.
 * GoTo Contact Center WebChat is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;
 * without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
 * See the GNU General Public License for more details.
 * You should have received a copy of the GNU General Public License along with GoTo Contact Center WebChat.
 * If not, see <https://www.gnu.org/licenses/>.
 */

.goto-contact-center-webchat {
  display: grid;
  gap: var(--goto-spacing-06);
  grid-template-columns: 1fr;
  grid-template-rows: 0fr 1fr;
  padding: var(--goto-spacing-03);
}

.goto-contact-center-webchat__header {
  font: var(--goto-heading-medium);
}

.admin-form {
  display: flex;
  flex-direction: column;
  gap: var(--goto-spacing-03);
  justify-content: flex-start;
}

.admin-form__field {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 0fr 1fr;
  gap: var(--goto-spacing-03);
}

.admin-form__field--checkbox > .admin-form__field-inner {
  grid-template-columns: 0fr 1fr;
  grid-template-rows: 1fr;
}

.admin-form__field--textarea > .admin-form__field-inner {
  gap: var(--goto-spacing-01);
  grid-template-rows: 1fr 0fr;
  justify-self: flex-start;
}

.admin-form__field-input--checkbox + .admin-form__field-label {
  color: var(--goto-text-01);
  justify-self: flex-start;
  padding-bottom: var(--goto-spacing-01);
}

.admin-form__field-input--textarea + .admin-form__field-label {
  justify-self: flex-start;
}

.admin-form__field-header {
  font: var(--goto-body-medium-semibold);
  padding-bottom: var(--goto-spacing-01);
}

.admin-form__field-subtitle {
  font: var(--goto-caption-medium);
}

.admin-form__field-inner {
  display: grid;
  grid-template-rows: 0fr 1fr;
  grid-template-columns: 1fr;
  place-items: center;
  padding: var(--goto-spacing-02);
}

.admin-form__field-input {
  padding: var(--goto-spacing-02);
}

.admin-form__field-label {
  color: var(--goto-text-02);
  font: var(--goto-caption-default-01);
}

.admin-form__field-input--textarea {
  font: var(--goto-code-medium);
  resize: none;
}

.admin-form__submit {
  background-color: var(--goto-interactive-01);
  border-color: var(--goto-interactive-01);
  color: var(--goto-text-06);
  border-width: 1px;
  border-style: solid;
  cursor: pointer;
  box-sizing: border-box;
  outline: none;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: var(--goto-button-text-medium);
  height: 36px;
  padding: 0 var(--goto-spacing-04);
  min-width: 80px;
  white-space: nowrap;
  align-self: flex-start;
}

.admin-form__submit:hover {
  background-color: var(--goto-hover-primary);
  border-color: var(--goto-hover-primary);
}

.admin-form__submit:active {
  background-color: var(--goto-pressed-primary);
  border-color: var(--goto-pressed-primary);
  box-shadow: none;
}

.admin-form__submit:focus-visible {
  border-color: var(--goto-focus);
  box-shadow: var(--goto-highlight);
}