/*
  Editable Description Component Styles
  ------------------------------------------------------------------------------
*/

$rename-dash-title-padding: 5px;

.editable-description {
  height: $form-xs-height;
  width: 100%;
  margin-top: -3px;
}

.editable-description--preview,
.cf-input.editable-description--input > input {
  font-size: $form-xs-font;
  font-weight: 400;
  font-family: $ix-text-font;
  padding: 0 $rename-dash-title-padding;
}

.editable-description--preview,
.editable-description--input {
  position: relative;
  width: 100%;
}

.editable-description--preview {
  border-radius: $radius;
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  @include no-user-select();
  color: $g13-mist;
  transition: color 0.25s ease, background-color 0.25s ease, border-color 0.25s ease;
  border: $ix-border solid transparent;
  height: $form-xs-height;
  line-height: $form-xs-height - ($ix-border * 2);
  
  .cf-icon {
    position: relative;
    top: -2px;
    display: inline-block;
    margin-left: $ix-marg-b;
    opacity: 0;
    transition: opacity 0.25s ease;
    color: $g11-sidewalk;
  }
  
  &:hover .cf-icon {
    opacity: 1;
  }
  
  &.untitled {
    color: $g9-mountain;
    font-style: italic;
  }

  &:hover {
    cursor: text;
    color: $g20-white;
  }
}

/* Ensure placeholder text matches font weight of title */
.cf-input.editable-description--input > input {
  &::-webkit-input-placeholder {
      font-weight: $page-title-weight !important;
    }
    &::-moz-placeholder {
      font-weight: $page-title-weight !important;
    }
    &:-ms-input-placeholder {
      font-weight: $page-title-weight !important;
    }
    &:-moz-placeholder {
      font-weight: $page-title-weight !important;
    }
}
