:host {
  display: block;
  position: relative;
  color: var(--fc-form-section-color, var(--fc-color-text-primary));
}

section {
  padding-left: var(--fc-form-section-padding-left, 5px);
}

section[align="row"] {
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: start;
  flex-wrap: wrap;
}

section[align="row"] > slot::slotted(*) {
  margin-top: var(--fc-spacing-md);
}

:host([recursive]) {
  border-radius: 12px;
  border: 6px solid white;
  background-color: var(--fc-gray-100);
  font-size: 13px;
  padding: 3px;
}

section[align="column"] > slot::slotted(*) {
  width: 100%;
}

:host([recursive]) > section[align="row"] > slot::slotted(*) {
  margin: 6px;
  font: var(--fc-font-13px-400);
}

:host([recursive]) > section[align="row"] > slot::slotted(fc-form-section) {
  margin: 6px 0;
  width: calc(100% - 24px);
  font: var(--fc-font-13px-400);
}

:host([recursive]) > section[align="row"] > slot::slotted(fc-separator) {
  width: 100%;
  height: 1px;
  padding: 0;
  margin: 0;
  visibility: hidden;
}

section[align="row"] > slot::slotted(*:not(:last-child)) {
  margin-right: var(--fc-form-section-margin-right-item, 20px);
}

section[align="column"] {
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  gap: 12px;
}

section[collapsable] {
  transition: max-height 0.4s ease;
  max-height: 0;
}

section[collapsable][collapsed] {
  max-height: 700px;
  transition: max-height 0.4s ease;
  overflow: var(--fc-form-section-overflow, visible);
}

section[collapsable]:not([collapsed]) {
  overflow: var(--fc-form-section-overflow, hidden);
}

.collapsable-label-container {
  cursor: pointer;
  display: block;
}

.collapsable-label-container > slot::slotted(label),
label {
  cursor: pointer;
  width: fit-content;
}

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

slot[name='label'][invalid],
label[invalid] {
  color: var(--fc-form-section-label-invalid-color, var(--fc-red-900));
}

::slotted(label) {
  display: block;
}

::slotted(label),
label {
  font-size: var(--fc-form-section-label-font-size, 12px);
  font-weight: var(--fc-form-section-label-font-weight, normal);
  margin-bottom: var(--fc-form-section-label-margin-bottom, 0);
}

.arrow {
  border: solid var(--fc-form-section-arrow-color, var(--fc-gray-700));
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 2px;
  margin-bottom: 1px;
  margin-right: 5px;
  transition: 0.2s ease;
}

.arrow.right {
  transform: rotate(-45deg);
}

.arrow.down {
  transform: rotate(45deg);
}

.arrow.invalid {
  border-color: var(--fc-form-section-label-invalid-color, var(--fc-red-900));
}

::slotted(fc-form-break-line) {
  display: flex;
  flex: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

::slotted(fc-form-section[sticky]) {
  margin-top: -12px !important;
}

:host([sticky]) ::after {
  height: 8px;
  width: 6px;
  content: ' ';
  background: white;
  display: block;
  position: absolute;
  right: -6px;
  top: -6px;
}

:host([sticky]) ::before {
  height: 10px;
  width: 8px;
  content: ' ';
  background: white;
  display: block;
  position: absolute;
  left: -6px;
  top: -6px;
}