// Editable tags
// --------------------------------------------------

@import "../variables/colors";
@import "../variables/sizes";
@import "../variables/mixins";
@import '~cartoassets/src/scss/cdb-variables/colors';
@import '~cartoassets/src/scss/cdb-variables/sizes';
$fieldBgColor: transparent;
$fieldBorderColor: #DFE8EC;

.EditableField {
  .EditableField-button {
    margin-right: 0;

    &:hover {
      text-decoration: underline;
    }
  }

  .EditableField-input {
    display: none;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border: none;
    outline: none;
    background: none;
    background: -webkit-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
    background: -moz-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
    background: -ms-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
    background: -o-linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0;
    background: linear-gradient(bottom, $fieldBorderColor 0%, $fieldBgColor 8%) 0 0; /* stylelint-disable-line */
    background-size: 100% $baseSize * 2;
  }
}

.EditableField.is-editing {
  width: 100%;

  .EditableField-button {
    display: none;
  }

  .EditableField-input {
    display: block;
    resize: none;
  }
}