// 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 border;

  &.editing .sci-inline-edit__content {
    .sci-inline-edit__content {
      padding-top: 0;
    }
  }

  .sci-inline-edit__content {
    display: flex;
    flex-direction: column;
    margin-left: -.25em;
    min-height: 36px;
    padding-left: .25em;
    position: relative;
    width: 100%;

    textarea,
    .sci-inline-edit__view {
      min-height: 36px;
      padding: .3em .2em .2em;
    }

    .sci-inline-edit__view {
      border: 1px solid transparent;
      cursor: pointer;
      white-space: pre-wrap;
      width: 100%;

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

    textarea {
      background-color: $color-white;
      border: 1px solid $brand-focus;
      border-radius: 4px;
      outline: none;
      overflow: hidden;
      width: 100%;

      &:focus {
        outline: none;
      }
    }

    .sci-inline-edit__error {
      bottom: -16px;
      color: $brand-danger;
      font-size: 12px;
      font-weight: normal;
      line-height: 12px;
      position: absolute;
    }
  }

  &.editing {
    margin-top: 0;

    .sci-inline-edit__content {
      &.error {
        border-color: $brand-danger;
        margin-bottom: 16px;

        textarea {
          border-color: $brand-danger;
        }
      }
    }

    .sci-inline-edit__control {
      &.btn-disabled {
        background: $color-silver-chalice;
        color: $color-concrete;
      }
    }
  }
}