/* =========================
   Editable string
========================= */

@use "../kit-deps" as *;

.editable-string-component {
  display: inline-flex;
  align-items: center;
  gap: $space-2;

  .editable-string-content {
    display: inline-flex;
    align-items: center;
    gap: $space-2;
    font-size: inherit;

    .editable-string {
      font-size: inherit;
      border-bottom: $border-width-base $border-style-base $border-color-muted;
      min-width: 40px;
      padding: 2px 0;
    }
  }

  .edit-text-btn {
    color: $neutral-700;

    &:hover:not(:disabled) {
      color: $neutral-900;
      background-color: $neutral-100;
    }
  }

  .editable-string-form {
    display: inline-flex;
    align-items: center;
    gap: $space-2;

    .form-group {
      max-width: 260px;
      margin: 0;

      .input {
        min-height: auto;
        padding: $space-2 $space-4;
      }
    }
  }

  .d-none {
    display: none !important;
  }
}