@use "variables.scss";

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

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

  .document-name {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

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

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

  .btn:hover {
    cursor: pointer;
  }

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

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

    .spinner {
      color: variables.$grey;
    }

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