/*
  Editable Name Component Styles
  ------------------------------------------------------------------------------
*/

$resource-name-font-size: 17px;
$resource-name-font-wight: 600;
$rename-dash-title-padding: 6px;

.editable-name > a,
.cf-input.editable-name--input > input {
  font-size: $resource-name-font-size;
  font-weight: $resource-name-font-wight;
  font-family: $ix-text-font;
  padding: 0 $rename-dash-title-padding;
}

.editable-name > a {
  white-space: nowrap;
  line-height: $resource-name-font-size;
  padding-left: ($rename-dash-title-padding + $ix-border);
  padding-right: 0;
}

.editable-name {
  height: $form-xs-height;
  position: relative;
  display: inline-block;
}

.editable-name--toggle {
  font-size: $resource-name-font-size * 0.75;
  transform: translateY(-10%);  
  padding: $ix-marg-a;
  display: inline-block;
  margin-left: $ix-marg-b;
  transition: color 0.25s ease, opacity 0.25s ease;
  opacity: 1;
  color: $g11-sidewalk;

  &:hover {
    cursor: pointer;
    color: $g15-platinum;
  }
}


.cf-input.editable-name--input {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
}

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


/* When used inside an index list, hide edit button until row hover */

.index-list--row .editable-name--toggle {
  opacity: 0;
}
.index-list--row:hover .editable-name--toggle {
  opacity: 1;
}