$font-family-sans-serif:
  -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;

  * {
  box-sizing: border-box;
}
// .d-none {
//   display: none !important;
// }

.dropzone {
  box-sizing: border-box;
  display: block;
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 99999;

  background: rgba(#60a7dc, 0.8);
  border: 11px dashed #60a7dc;
}


.uploadgrid {
  position: absolute;
  z-index: 9999;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  background-color: rgba(black, 0.95);
  padding: 0.5rem;
  overflow: hidden;

  &__item {
    padding: 0.5rem;
    width: 100%;
    flex: none;

    &-inner {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      border-radius: 0.5rem;
      background-color: rgba(white, 0.04);
      border: 2px dashed rgba(white, 0.25);
      
      p {
        color: rgba(white, 0.42);
        margin: 0 !important;
        padding: 0;
        font-family: $font-family-sans-serif;
        font-size: 0.875rem;
        font-weight: 700;
        width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
        word-break: break-all;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

        @media (min-width: 600px) {
          font-size: 1rem;
        }

        @media (min-width: 960px) {
          font-size: 1.25rem;
        }
      }
    }

    &:hover .uploadgrid__item-inner, &:-moz-drag-over .uploadgrid__item-inner {
      background-color: rgba(white, 0.11);
      border: 2px solid rgba(white, 0.11);

      p {
        color: rgba(white, 0.56);;
      }
    }
  }

  @supports (-webkit-backdrop-filter: none) or (backdrop-filter: none) {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(black, 0.9);

    .uploadgrid__item-inner p {
      // color: transparent;
    }
  }

  &.uploadgrid--2-items {
    @media (orientation: landscape) {
      flex-direction: row;

      .uploadgrid__item {
        flex: 0 0 calc(50vw - 1rem);
      }
    }

    @media (orientation: portrait) {
      flex-direction: column;

      .uploadgrid__item {
        flex: 0 0 calc(50vh - 1rem);
      }
    }
  }

  &.uploadgrid--3-items {
    flex-direction: column;

    .uploadgrid__item {
      flex: 0 0 calc(33.333333333vh - 0.333333333rem);
    }

    @media (orientation: landscape) and (min-width: 600px) {
      flex-direction: row;

      .uploadgrid__item {
        flex: 0 0 calc(33.333333333vw - 0.333333333rem);
      }
    }
  }

  &.uploadgrid--4-items {
    flex-wrap: wrap;
    flex-direction: row;

    .uploadgrid__item {
      flex: 1 0 calc(50vw - 0.5rem);
      height: calc(50vh - 0.5rem);
    }

    @media (orientation: portrait) and (max-width: 600px) {
      flex-direction: column;

      .uploadgrid__item {
        flex: 1 0 calc(25vh - 0.25rem);
      }
    }
  }

  &.uploadgrid--5-items {
    flex-wrap: wrap;
    flex-direction: row;

    .uploadgrid__item {
      flex: 1 0 calc(50vw - 0.5rem);
      height: calc(33.333333333vh - 0.333333333rem);
    }

    @media (orientation: portrait) and (max-width: 600px) {
      flex-direction: column;

      .uploadgrid__item {
        flex: 1 0 calc(20vh - 0.2rem);
      }
    }
  }

  &.uploadgrid--6-items {
    flex-wrap: wrap;

    @media (orientation: landscape) {
      flex-direction: row;

      .uploadgrid__item {
        flex: 0 0 calc(33.333333333vw - 0.333333333rem);
        height: calc(50vh - 0.5rem);
      }
    }

    @media (orientation: portrait) {
      flex-direction: column;

      .uploadgrid__item {
        flex: 0 0 calc(33.333333333vh - 0.333333333rem);
        width: calc(50vw - 0.5rem);
      }
    }
  }

  &.uploadgrid--7-items,
  &.uploadgrid--8-items {
    flex-wrap: wrap;

    @media (orientation: landscape) {
      flex-direction: row;

      .uploadgrid__item {
        flex: 1 0 calc(25vw - 0.25rem);
        height: calc(50vh - 0.5rem);
      }
    }

    @media (orientation: portrait) {
      flex-direction: column;

      .uploadgrid__item {
        flex: 1 0 calc(25vh - 0.25rem);
        width: calc(50vw - 0.5rem);
      }
    }
  }

  &.uploadgrid--8-items {
    @media (orientation: landscape) {
      .uploadgrid__item {
        max-width: calc(25vw - 0.25rem);
      }
    }
  }
}