$title-line-height: var(
  --wds-page-header-title-line-height,
  var(--wds-font-line-height-heading-2, 36px)
);

.editable-title,
.editable-title .editable-title__input,
.editable-title .editable-title__heading-wrapper .editable-title__heading {
  font-size: var(--wds-page-header-title-font-size, var(--wds-font-size-heading-2, 28px));
  font-weight: var(--wds-page-header-title-font-weight, var(--wds-font-weight-heading-2, 700));
  line-height: #{$title-line-height};
}

@media (hover: hover) {
  .editable-title:hover .editable-title__activation-indicator {
    border-bottom: 1px solid var(--wds-editable-title-marker-fill-active, var(--wds-color-blue-200, #116dff));
  }
}

.editable-title__activation-indicator {
  margin-left: var(--wds-editable-title-marker-gap, var(--wds-space-100, 6px));
  background-image: var(
    --wds-editable-title-marker-image,
    repeating-linear-gradient(
      to right,
      var(--wds-color-black-100) 0px,
      var(--wds-color-black-100) 1px,
      transparent 1px,
      transparent 4px
    )
  );
  border-bottom: 1px var(--wds-editable-title-marker-line-style, none)
    var(--wds-editable-title-marker-fill, var(--wds-color-black-100, var(--wsr-color-D40, #868AA5)));
  height: calc(#{$title-line-height} + 1px);

  &.editable-title__activation-indicator--focused {
    border-bottom: 1px solid var(--wds-editable-title-marker-fill-active, var(--wds-color-blue-200, #116dff));
  }
}

.editable-title__heading-wrapper--show-placeholder .editable-title__heading {
  color: var(--wds-editable-title-placeholder-fill, var(--wds-color-black-500, #CFD1DC));
}