:host-context(.item) {
  /**
   * @prop --color: Color of the label
   */
  --color: #072531;
  display: block;
  color: var(--color);
  font-family: var(--gasco-font-family, inherit);
  font-size: initial;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  box-sizing: border-box;
}

:host-context(.accordion-animated) {
  font-weight: 600;
  font-size: 28px;
  line-height: 36px;
  text-align: left;
  color: var(--color);
  max-width: max-content;
}

:host-context(.accordion-animated):nth-child(2) {
  font-weight: 400;
  font-size: 18px;
  line-height: 28px;
  color: #4D4D4D;
}

:host(.gasco-color) {
  color: var(--gasco-color-base);
}

:host(.gasco-text-wrap),
:host([text-wrap]) {
  white-space: normal;
}

:host-context(.item-interactive-disabled:not(.item-multiple-inputs)) {
  cursor: default;
  opacity: 0.3;
  pointer-events: none;
}

:host-context(.item-input) {
  flex: initial;
  max-width: 200px;
  pointer-events: none;
}

:host-context(.item-textarea) {
  align-self: baseline;
}

:host(.label-fixed) {
  flex: 0 0 100px;
  width: 100px;
  min-width: 100px;
  max-width: 200px;
}

:host(.label-stacked),
:host(.label-floating) {
  margin-bottom: 0;
  align-self: stretch;
  width: auto;
  max-width: 100%;
}
:host(.label-no-animate.label-floating) {
  transition: none;
}

::slotted(*) h1,
::slotted(*) h2,
::slotted(*) h3,
::slotted(*) h4,
::slotted(*) h5,
::slotted(*) h6 {
  text-overflow: inherit;
  overflow: inherit;
}

@media only screen and (max-width: 768px) {
  :host-context(.accordion-animated) {
    font-size: 20px;
    line-height: 28px;
  }
}
:host(.gasco-text-wrap),
:host([text-wrap]) {
  line-height: 1.5;
}

/**
 * When translating the label, we need to use translateY
 * instead of translate3d due to a WebKit bug: https://bugs.webkit.org/show_bug.cgi?id=215731
 */
:host(.label-stacked),
:host(.label-floating) {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 0;
  /* stylelint-disable property-disallowed-list */
  transform-origin: top left;
  /* stylelint-enable property-disallowed-list */
}

:host(.label-stacked.label-rtl),
:host(.label-floating.label-rtl) {
  /* stylelint-disable property-disallowed-list */
  transform-origin: top right;
  /* stylelint-enable property-disallowed-list */
}

:host(.label-stacked) {
  transform: translateY(50%) scale(0.75);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

:host(.label-floating) {
  transform: translateY(96%);
  transition: color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1);
}

:host-context(.gasco-focused).label-floating,
:host-context(.item-has-focus).label-floating,
:host-context(.item-has-placeholder:not(.item-input)).label-floating,
:host-context(.item-has-value).label-floating {
  transform: translateY(50%) scale(0.75);
}

/**
 * When translating the label inside of an gasco-item with `fill="outline"`,
 * add pseudo-elements to imitate fieldset-like padding without shifting the label
 */
:host-context(.item-fill-outline.gasco-focused).label-floating,
:host-context(.item-fill-outline.item-has-focus).label-floating,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating,
:host-context(.item-fill-outline.item-has-value).label-floating {
  transform: translateY(-6px) scale(0.75);
  position: relative;
  max-width: min-content;
  background-color: var(--gasco-item-background, var(--gasco-background-color, #fff));
  overflow: visible;
  z-index: 3;
}
:host-context(.item-fill-outline.gasco-focused).label-floating::before, :host-context(.item-fill-outline.gasco-focused).label-floating::after,
:host-context(.item-fill-outline.item-has-focus).label-floating::before,
:host-context(.item-fill-outline.item-has-focus).label-floating::after,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
:host-context(.item-fill-outline.item-has-value).label-floating::before,
:host-context(.item-fill-outline.item-has-value).label-floating::after {
  position: absolute;
  width: 4px;
  height: 100%;
  background-color: var(--gasco-item-background, var(--gasco-background-color, #fff));
  content: "";
}
:host-context(.item-fill-outline.gasco-focused).label-floating::before,
:host-context(.item-fill-outline.item-has-focus).label-floating::before,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::before,
:host-context(.item-fill-outline.item-has-value).label-floating::before {
  /* stylelint-disable property-disallowed-list */
  left: calc(-1 * 4px);
  /* stylelint-enable property-disallowed-list */
}
:host-context(.item-fill-outline.gasco-focused).label-floating::after,
:host-context(.item-fill-outline.item-has-focus).label-floating::after,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input)).label-floating::after,
:host-context(.item-fill-outline.item-has-value).label-floating::after {
  /* stylelint-disable property-disallowed-list */
  right: calc(-1 * 4px);
  /* stylelint-enable property-disallowed-list */
}

:host-context(.item-fill-outline.gasco-focused.item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating,
:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating {
  transform: translateX(-32px) translateY(-6px) scale(0.75);
}

:host-context(.item-fill-outline.gasco-focused.item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-focus.item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot).label-floating.label-rtl,
:host-context(.item-fill-outline.item-has-value.item-has-start-slot).label-floating.label-rtl {
  transform: translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75);
}

:host-context(.gasco-focused).label-stacked:not(.gasco-color),
:host-context(.gasco-focused).label-floating:not(.gasco-color),
:host-context(.item-has-focus).label-stacked:not(.gasco-color),
:host-context(.item-has-focus).label-floating:not(.gasco-color) {
  color: var(--gasco-color-primary, #00A3E0);
}

:host-context(.gasco-focused.gasco-color).label-stacked:not(.gasco-color),
:host-context(.gasco-focused.gasco-color).label-floating:not(.gasco-color),
:host-context(.item-has-focus.gasco-color).label-stacked:not(.gasco-color),
:host-context(.item-has-focus.gasco-color).label-floating:not(.gasco-color) {
  color: var(--gasco-color-contrast);
}

:host-context(.item-fill-solid.gasco-focused.gasco-color).label-stacked:not(.gasco-color),
:host-context(.item-fill-solid.gasco-focused.gasco-color).label-floating:not(.gasco-color),
:host-context(.item-fill-outline.gasco-focused.gasco-color).label-stacked:not(.gasco-color),
:host-context(.item-fill-outline.gasco-focused.gasco-color).label-floating:not(.gasco-color),
:host-context(.item-fill-solid.item-has-focus.gasco-color).label-stacked:not(.gasco-color),
:host-context(.item-fill-solid.item-has-focus.gasco-color).label-floating:not(.gasco-color),
:host-context(.item-fill-outline.item-has-focus.gasco-color).label-stacked:not(.gasco-color),
:host-context(.item-fill-outline.item-has-focus.gasco-color).label-floating:not(.gasco-color) {
  color: var(--gasco-color-base);
}

:host-context(.gasco-invalid.gasco-touched).label-stacked:not(.gasco-color),
:host-context(.gasco-invalid.gasco-touched).label-floating:not(.gasco-color) {
  color: var(--highlight-color-invalid);
}

::slotted(*) h1 {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 24px;
  font-weight: normal;
}

::slotted(*) h2 {
  margin-left: 0;
  margin-right: 0;
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 16px;
  font-weight: normal;
}

::slotted(*) h3,
::slotted(*) h4,
::slotted(*) h5,
::slotted(*) h6 {
  margin-left: 0;
  margin-right: 0;
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 14px;
  font-weight: normal;
  line-height: normal;
}

::slotted(*) p {
  margin-left: 0;
  margin-right: 0;
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 14px;
  line-height: 20px;
  text-overflow: inherit;
  overflow: inherit;
}

::slotted(p) {
  color: var(--gasco-color-step-600, #666666);
}

:host(.in-item-color)::slotted(p) {
  color: inherit;
}