@import 'modules/app/viewports';

:host {
  display: flex;
  flex-direction: column;
  gap: 20px;

  .close-button {
    align-self: flex-end;
  }

  .dialog-title {
    font-size: 22px;
  }

  ::ng-deep .ngx-file-drop__drop-zone {
    border-radius: 10px !important;

    &:hover {
      background-color: var(--app-bg-color-l3);
    }
  }
}

.upload-files-mask {
  cursor: pointer;

  position: absolute;
  inset: 0;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  margin-bottom: 4px;

  border-radius: 30px;
}

.wrapper-upload-files {
  position: relative;
  width: 100%;
  height: 100%;
}

.upload-files-label {
  max-width: 50%;
  text-align: center;
}

.upload-table {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content max-content;

  .cell {
    padding: 5px;

    &.title {
      font-weight: 500;
    }

    &.border {
      border-top: 1px solid var(--color-gray-eee);
    }
  }

  .file-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.upload-name-style td {
  @include viewport-mobile {
    overflow: hidden;
    max-width: 250px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

app-cmf-icon {
  display: flex;
}