@import "./imports.scss";

.document-name-component {
  flex: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: 12px;
  line-height: 20px;

  .document-icon {
    display: flex;
    align-items: center;
    border: 1px solid $grey-detail;
    border-radius: 1px;
  }

  .document-name {
    display: inline-block;
    vertical-align: middle;

    &.is-editable {
      display: inline-block;
      overflow-x: hidden;
      white-space: nowrap;
      border-radius: 8px;
      padding: 6px 14px 6px 14px;
      outline: 1px solid $grey-outline;
      max-width: 420px;
    }
  }

  .btn {
    color: $primary;
    font-weight: 500;
  }

  .btn:hover {
    cursor: pointer;
  }

  .message-container {
    display: flex;
    align-items: center;
    gap: 8px;
    color: $grey;

    .notification {
      background-color: transparent;
      padding: 6px;
    }

    .spinner {
      color: $grey;
    }

    .cloud-icon {
      display: flex;
    }
  }
}