import { css } from 'lit';

export default css`
:host {
  display: block;
}

.editor-actions {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.editor-actions > * {
  margin-right: 20px;
}

.editor-actions .dropdown {
  position: relative;
  z-index: 4;
}

.empty-message {
  text-align: center;
  font-family: var(--md-sys-typescale-body-medium-font-family-name);
  font-style: var(--md-sys-typescale-body-medium-font-family-style);
  font-weight: var(--md-sys-typescale-body-medium-font-weight);
  font-size: var(--md-sys-typescale-body-medium-font-size);
  letter-spacing: var(--md-sys-typescale-body-medium-tracking);
  line-height: var(--md-sys-typescale-body-medium-height);
  text-transform: var(--md-sys-typescale-body-medium-text-transform);
  text-decoration: var(--md-sys-typescale-body-medium-text-decoration);
  color: var(--md-sys-color-on-surface);
}

.param-row {
  display: flex;
  align-items: center;
  height: 48px;
  margin-bottom: 24px;
}

.param-row > *:not(:last-child) {
  margin-right: 8px;
}

.text-input,
.input-wrapper {
  border-radius: var(--md-sys-shape-corner-medium);
  align-self: stretch;
  display: flex;
  align-items: stretch;
  position: relative;
}

.text-input > .state,
.input-wrapper > .state {
  position: absolute;
  inset: 0;
  background-color: var(--md-sys-color-surface-variant);
  border-radius: inherit;
}

.text-input > textarea,
.input-wrapper > input {
  background-color: transparent;
  border: none;
  outline: none;
  padding: 0 16px;
  width: 100%;
  color: var(--md-sys-color-on-surface-variant);
  font-family: var(--md-sys-typescale-body-large-font-family-name);
  font-style: var(--md-sys-typescale-body-large-font-family-style);
  font-weight: var(--md-sys-typescale-body-large-font-weight);
  font-size: var(--md-sys-typescale-body-large-font-size);
  letter-spacing: var(--md-sys-typescale-body-large-tracking);
  line-height: var(--md-sys-typescale-body-large-height);
  text-transform: var(--md-sys-typescale-body-large-text-transform);
  text-decoration: var(--md-sys-typescale-body-large-text-decoration);
  position: relative;
  z-index: 2;
}

.text-input > textarea {
  resize: vertical;
  min-height: 200px;
  padding: 16px;
}

.text-input:focus-within::before,
.input-wrapper:focus-within::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: var(--md-sys-state-focus-state-layer-opacity);
  background-color: var(--md-sys-color-primary);
  z-index: 1;
}

.text-input > .error,
.input-wrapper > .error {
  color: var(--md-sys-color-error);
  position: absolute;
  bottom: 0;
  left: 16px;
  z-index: 0;
  transform: translateY(0);
  transition: transform 260ms cubic-bezier(.4,0,.2,1);

  font-family: var(--md-sys-typescale-body-small-font-family-name);
  font-style: var(--md-sys-typescale-body-small-font-family-style);
  font-weight: var(--md-sys-typescale-body-small-font-weight);
  font-size: var(--md-sys-typescale-body-small-font-size);
  letter-spacing: var(--md-sys-typescale-body-small-tracking);
  line-height: var(--md-sys-typescale-body-small-height);
  text-transform: var(--md-sys-typescale-body-small-text-transform);
  text-decoration: var(--md-sys-typescale-body-small-text-decoration);
}

.text-input:has(input:invalid) .error,
.input-wrapper:has(input:invalid) .error {
  transform: translateY(1rem);
}

.name-input {
  width: 256px;
}

.value-input {
  flex: 1;
}

`;
