:host {
  --layout: vertical;
  --label-width: var(--group-label-width, 160px);
  --control-width: 1fr;
  --cursor: pointer;
  --gap: var(--bp-space-xs);
  --grid-template-columns: var(--label-width) var(--control-width) minmax(0, 150px);
  --grid-template-areas: 'label label label' 'input input input' 'message message message';
  contain: inherit;
  width: 100%;
  container-type: inline-size; /* https://stackoverflow.com/questions/73975889/container-query-collapses-width-of-element */
}

[part='internal'] {
  grid-template-columns: var(--grid-template-columns);
  grid-template-areas: var(--grid-template-areas);
  gap: var(--gap);
  display: grid;
  width: 100%;
  grid-template-rows: auto;
  align-items: center;
}

:host(:not(:state(message))) {
  --grid-template-areas: 'label label label' 'input input input';
}

:host(:not(:state(label))) {
  --grid-template-areas: 'input input input' 'message message message';
}

/* :host(:not(:state(label)):not(:state(message))) */
:host(:not(:state(label, message))) {
  --grid-template-areas: 'input input input';
}

:host(:state(inline-control)) {
  --control-width: auto;
  --label-width: auto;
  --grid-template-columns: var(--control-width) var(--label-width);
  --grid-template-areas: 'input label' 'message message';

  [part='internal'] {
    width: fit-content;
  }
}

:host(:state(inline-control):not(:state(message))) {
  --grid-template-areas: 'input label';
}

:host([control-width='shrink']) {
  --control-width: max-content;
  --field-sizing: content;
  container-type: initial !important;
  width: fit-content;

  [part='internal'] {
    width: min-content;
  }
}

:host([control-width='shrink'][layout='compact']:not(:state(label))) {
  --grid-template-areas: 'input message';
  --grid-template-columns: auto auto;
}

:host([control-width='shrink']) ::slotted([bp-field]) {
  --field-sizing: content;
  --width: fit-content;
}

:host([control-width='shrink'][layout='compact']) ::slotted(bp-field-message) {
  --min-width: initial;
  --text-wrap: nowrap;
}

/*
 * https://github.com/w3c/csswg-drafts/issues/8088
 * https://github.com/web-platform-tests/wpt/pull/45135
 */
@container (min-width: 500px) {
  :host([layout~='horizontal']) [part='internal'],
  :host([layout~='horizontal-inline']) [part='internal'],
  :host([layout='compact']) [part='internal'] {
    --grid-template-areas: 'label input input' '. message message';
  }

  :host([layout~='horizontal']:not(:state(message))) [part='internal'],
  :host([layout~='horizontal-inline']:not(:state(message))) [part='internal'],
  :host([layout='compact']:not(:state(message))) [part='internal'] {
    --grid-template-areas: 'label input input';
  }
}

@container (min-width: 700px) {
  :host([layout='compact']) [part='internal'] {
    --grid-template-areas: 'label input message';
  }

  :host([layout='compact']:not(:state(label))) [part='internal'] {
    --grid-template-areas: 'input message';
    --grid-template-columns: var(--control-width) auto;
  }
}

.input-container {
  grid-area: input;
  display: flex;
  align-items: center;
}

slot {
  display: flex;
  width: 100%;
}

slot[name='label'] {
  grid-area: label;
  gap: var(--gap);
}

slot[name='message'] {
  grid-area: message;
}

:host(:state(disabled)) slot[name='label'] {
  color: var(--bp-status-disabled-background-200);
}

::slotted(label) {
  cursor: var(--cursor) !important;
}

:host(:state(disabled)) ::slotted(bp-field-message) {
  --color: var(--bp-status-disabled-background-200);
}

:host(:state(disabled)) {
  --cursor: not-allowed;
}

:host(:state(error)) ::slotted(bp-field-message),
:host(:state(invalid):state(touched)) ::slotted(bp-field-message),
::slotted(bp-field-message[error]) {
  --color: var(--bp-status-danger-background-200);
}

:host(:state(success)) ::slotted(bp-field-message) {
  --color: var(--bp-status-success-background-200);
}
