// scss-lint:disable SelectorDepth
// scss-lint:disable NestingDepth
.sci-inline-edit {
  column-gap: .25em;
  display: grid;
  grid-template-columns: auto repeat(2, max-content);
  transition: .4s $timing-function-sharp;

  .sci-inline-edit__content {
    border: $border-transparent;
    display: flex;
    flex-direction: column;
    justify-content: center;
    line-height: 1em;
    margin-left: -.25em;
    min-height: 36px;
    padding-left: .25em;
    width: 100%;

    .sci-inline-edit__view {
      cursor: pointer;
      width: 100%;

      &.blank {
        color: $color-silver-chalice;
      }
    }

    textarea {
      background: transparent;
      border: 0;
      line-height: 1em;
      min-height: 1em;
      outline: none;
      overflow: hidden;
      padding: 0;
      padding-top: 2px;
      width: 100%;

      &:focus {
        outline: none;
      }

      &.error {
        border-color: $brand-danger;
      }
    }

    .sci-inline-edit__error {
      color: $brand-danger;
      font-size: .8em;
    }
  }

  &.editing {

    .sci-inline-edit__content {
      border-color: $brand-focus;
    }
  }
}