:host {
  --label-width: var(--group-label-width, 200px);
  --cursor: pointer;
  --grid-template-columns: var(--label-width) minmax(auto, max-content) auto;
  --grid-template-areas: 'label label label' 'input input input' 'message message message';
  width: 100%;
  container-type: inline-size; /* https://stackoverflow.com/questions/73975889/container-query-collapses-width-of-element */
}

[part='internal'] {
  display: grid;
  width: fit-content;
  gap: var(--bp-space-xs);
  align-items: start;
  grid-template-rows: auto;
  grid-template-columns: var(--grid-template-columns);
  grid-template-areas: var(--grid-template-areas);
}

slot[name='label'] {
  display: block;
  grid-area: label;
  width: fit-content;
}

slot[name='message'] {
  grid-area: message;
  display: flex;
  height: 100%;
  align-items: center;
}

.input-slot-group {
  grid-area: input;
  display: flex;
  flex-wrap: wrap;
  width: fit-content;
  flex-direction: column;
  gap: var(--bp-space-xs) var(--bp-space-sm);
}

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

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

:host(:not(:state(message))) slot[name='message'] {
  display: none;
}

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

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

  :host([layout*='-inline']) .input-slot-group,
  :host([layout*='compact']) .input-slot-group {
    flex-direction: row;
  }
}

@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(message))) [part='internal'] {
    --grid-template-areas: 'label input input';
  }
}

/* inline groups */
:host(:state(inline-group)) slot[name*='input-'] {
  display: grid;
  grid-area: initial;
  grid-auto-flow: dense;
  grid-template-areas: 'input label';
  gap: var(--bp-space-xs);
  grid-template-columns: minmax(auto, max-content) auto;
  align-items: center;
  width: fit-content;
}

:host(:state(inline-group)) ::slotted([bp-control]) {
  grid-area: input;
}

:host(:state(inline-group)) ::slotted(label) {
  cursor: var(--cursor) !important;
  grid-area: label !important;
  width: fit-content !important;
}
