@use 'edit-resource.tokens' as tokens;
@use 'apps/dashboard/src/variables' as *;

.main-container {
  display: flex;
  gap: rhythm(3);

  & > p {
    margin-bottom: 0;
  }
}

.sticky-header {
  $width-search-input: rhythm(40);
  position: sticky;
  background: $color-light-stronger;
  top: #{tokens.$height-header};
  padding: var(--app-layout-padding-top) 0 #{rhythm(3)} 0;
  margin-top: calc(var(--app-layout-padding-top) * -1);
  width: tokens.$width-page-content;
  z-index: 1;

  pa-input {
    display: block;
    width: $width-search-input;
  }
  pa-input.can-reset ::ng-deep pa-icon {
    cursor: pointer;
  }
}
.scrollable-area {
  flex: 1 1 auto;
  padding: 0 0 0 rhythm(1.5);
  max-width: tokens.$width-page-content;
}

.right-panel-container {
  flex: 0 0 auto;
  position: relative;
  width: rhythm(32);
  z-index: 1;

  > :first-child {
    position: sticky;
    top: tokens.$sticky-top;
  }
}

.thumbnails-container {
  display: flex;
  flex-wrap: wrap;
  gap: rhythm(2);
  position: relative;

  .loading-mask {
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }
  .drop-container {
    display: flex;
    flex-direction: column;

    .drop-image-area {
      align-items: center;
      background-color: $color-light-stronger;
      border: 1px dashed $color-neutral-light;
      color: $color-neutral-light;
      cursor: pointer;
      display: flex;
      flex: 1 0 auto;
      justify-content: center;
      height: tokens.$thumbnail-height;
      text-align: center;
      transition: background-color $transition-hint;
      width: tokens.$thumbnail-width;

      &.file-over {
        background-color: $color-neutral-lightest;
      }
    }
  }
}
