$font-family: var(
  --wds-font-family-display,
  var(
    --wsr-font-family,
    Madefor,
    'Helvetica Neue',
    Helvetica,
    Arial,
    'メイリオ',
    'meiryo',
    'ヒラギノ角ゴ pro w3',
    'hiragino kaku gothic pro',
    sans-serif
  )
);

$title-font-size: var(
  --wds-page-header-title-font-size,
  var(--wds-font-size-heading-1, var(--wsr-heading-font-size-xl, 28px))
);
$title-font-weight: var(
  --wds-page-header-title-font-weight,
  var(--wds-font-weight-heading-1, var(--wsr-font-weight-bold, 700))
);
$title-line-height: var(
  --wds-page-header-title-line-height,
  var(--wds-font-line-height-heading-1, var(--wsr-heading-line-height-xl, 36px))
);

$marker-fill-active: var(
  --wds-editable-title-marker-fill-active,
  var(--wds-color-blue-100, var(--wsr-color-B10, #116dff))
);

@mixin heading-xl {
  font-family: #{$font-family};
  font-size: var(
    --wds-font-size-heading-1,
    var(--wsr-heading-font-size-xl, 28px)
  );
  font-weight: var(--wds-font-weight-heading-1, var(--wsr-font-weight-bold, 700));
  line-height: var(
    --wds-font-line-height-heading-1,
    var(--wsr-heading-line-height-xl, 36px)
  );
  letter-spacing: var(--wds-font-letter-spacing-heading-1, unset);
}

.editable-title {
  position: relative;
  display: flex;
  flex-grow: 0;
  box-sizing: border-box;

  &,
  & &__input {
    @include heading-xl;
  }

  &,
  & &__input,
  & &__heading-wrapper &__heading {
    font-size: #{$title-font-size};
    font-weight: #{$title-font-weight};
    line-height: #{$title-line-height};
  }

  & &__heading-wrapper,
  & &__activation-indicator,
  & &__renaming-field {
    box-sizing: border-box;
  }

  @media (hover: hover) {
    &:hover &__activation-indicator {
      border-bottom: 1px solid #{$marker-fill-active};
    }
  }

  &__activation-indicator {
    bottom: 0;
    margin-left: var(--wds-editable-title-marker-gap, 6px);
    margin-right: 4px;
    padding-right: 4px;
    max-width: 100%;
    background: transparent;
    background-image: var(--wds-editable-title-marker-image, none);
    background-repeat: no-repeat;
    background-position: bottom;
    background-origin: border-box;
    background-size: 100% 1px;
    border-bottom: 1px var(--wds-editable-title-marker-line-style, dashed)
      var(
        --wds-editable-title-marker-fill,
        var(--wds-color-black-400, var(--wsr-color-D40, #868AA5))
      );
    color: transparent;
    white-space: pre;
    display: flex;
    flex-grow: 0;
    transition: all 0.3s ease;
    overflow: hidden;
    min-width: 1ch;
    z-index: 1;
    height: calc(#{$title-line-height} + 1px);

    &#{&}--focused {
      border-bottom: 1px solid #{$marker-fill-active};
      flex-grow: 1;
    }
  }

  &__heading-wrapper {
    max-width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    padding-right: 6px;
    left: 6px;
    overflow: hidden;
    white-space: nowrap;

    &#{&}--focused:not(#{&}--show-placeholder) {
      visibility: hidden;
    }

    &#{&}--show-placeholder .editable-title__heading {
      color: var(
        --wds-editable-title-placeholder-fill,
        var(--wds-color-black-550, var(--wsr-color-D55, #CFD1DC))
      );
    }
  }

  &__renaming-field {
    visibility: hidden;
    position: absolute;
    z-index: 1;
    width: 100%;
    left: 6px;
    padding-right: 10px;

    &#{&}--focused {
      visibility: inherit;
    }
  }

  &__input {
    color: var(
      --wds-color-text-standard-primary,
      var(--wsr-color-D10, #000624)
    );
    text-overflow: clip;
    display: block;
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    border: 0;
    /* stylelint-disable-next-line plugin/use-baseline */
    outline: 0;
    background: transparent;
    box-shadow: none;
    width: inherit;
    /* stylelint-disable-next-line plugin/use-baseline */
    overflow-block: scroll;

    /* stylelint-disable-next-line plugin/use-baseline */
    &::selection {
      background: var(--wds-color-text-highlight, var(--wsr-color-B40, #d6e6fe));
    }
  }
}