@import '../../styles/colors.scss';

.container {
  display: flex;
  flex-direction: column;
  gap: 25px;
  container-type: inline-size;
}

.header {
  display: flex;
  gap: 10px;

  @container (width < 610px) {
    flex-direction: column-reverse;
  }
}

.filters {
  display: flex;
  gap: 10px;
}

.actionButtons {
  display: flex;
  justify-content: end;
  align-items: center;
  gap: 10px;
  padding: 1.5px 0;
  flex-grow: 1;
}

.search {
  display: flex;
  align-items: center;
  justify-content: end;

  height: 34px;
  overflow: hidden;
  border-radius: 4px;
  outline: solid 1px #dddddd;
  background: white;

  width: 100%;

  @container (width >= 610px) {
    max-width: 246px;
  }

  &:focus-within {
    outline-color: $primary-main;
  }
}

.dropzone {
  position: relative;

  font-size: 16px;
  background-color: $overlay-background-color;
  height: 250px;
  color: rgba(0, 0, 0, 0.25);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  &::before {
    content: '';
    position: absolute;
    transition:
      background-color ease 0.2s,
      inset ease 0.2s;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    border: dashed 3px rgba(0, 0, 0, 0.1);
    inset: 15px;
  }

  &:focus,
  &.isDragActive,
  &:hover {
    &::before {
      inset: 10px;
      background: rgba(0, 0, 0, 0.15);
    }
  }

  // Override button styles
  padding: 0;
  border: none;
  outline: none;
  letter-spacing: 1px;
  font-weight: 500;
  font-family: inherit;
}

.submissions {
  display: grid;
  gap: 25px;
  grid-template-columns: repeat(auto-fit, minmax(365px, 1fr));
}
