/* ==========================================================================
   Config
   ========================================================================== */
$editable-text-wrapper-icon-width: 25px;

/* ==========================================================================
   Styles
   ========================================================================== */
.gui-editable-text__wrapper {
  display: flex;
  margin: 0 0 0.25em;

  &:hover {
    .gui-editable-text__button {
      visibility: visible;
    }
  }

  .gui-page-information__title {
    margin: 0;
  }
}

.gui-editable-text__text {
  &:focus, &:active {
    outline: none;
  }
}

.gui-editable-text__button {
  margin-left: 0.5em;
  visibility: hidden;
  fill: $neutral-dark;

  &:hover {
    fill: $primary-blue;
  }
}

.gui-editable-text__input {
  border: none;
  outline: none;
  padding: 0;
  margin: 0;
  width: 100%;
  background: none;

  &.gui-single-line {
    height: 1.25em;
  }

  &.gui-expanding-textarea,
  &.gui-expanding-textarea:focus {
    border: none;
    padding: 0;
  }
}