@import 'hr-core-consts';


.hensel-dnd {
  height: calc(100% - 4px);
  padding: 0 0 0; // no extra padding -> padding is calculated in the child comp
  margin: 0; // see above
  overflow: hidden; // overflow hidden => all "to big" child components are hidden
  display: grid; // we define a grid
  position: relative;
  width: 100%; // 100 % view width (hardware screen)
  height: 100%; // 100% view height
  grid-template-rows: auto minmax(0, 1fr); // row relationships
  grid-template-columns: minmax(0, 1fr); // column relationship
  grid-column-gap: 0px;
  grid-template-areas: "caption""dnd"
}

.dnd-title {
  grid-area: caption;
  padding-bottom: 10px;
}

.font-disabled {
  color: rgba(0, 0, 0, 0.54)
}

.font-enabled {
  color: rgba(0, 0, 0, 0.87);
  font-weight: bold;
}


.dnd-upload-container {
  grid-area: dnd;
  cursor: default;
  height: calc(100% - 4px);
  border-radius: $hrBorder-radius-big;
  background-color: rgba(198, 231, 253, 0.3);
}

.dnd-upload-container-disabled {
  opacity: 0.6;
  background-color: transparent;
  border: 2px dashed gray;
}

.dnd-upload-container-disabled-btn {
  opacity: 1;
  background-color: transparent;
  border: 2px dashed gray;
}

.dnd-upload-container-enabled {
  opacity: 0.8;
  border: 2px dashed #1C8ADB;
}

.dnd-upload-container-enabled-btn {
  opacity: 1;
  border: 2px dashed #1C8ADB;
}

.dnd-upload-container-enabled:hover {
  cursor: pointer;
  opacity: 1;
}


.dnd-upload-icon {
  width: auto;
  height: auto;
  opacity: inherit;
  cursor: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dnd-upload-button {
  cursor: pointer;
}


.overlay {
  /* Height & width depends on how you want to reveal the overlay (see JS below) */
  height: calc(100% - 72px);
  margin-top: 47px;
  margin-bottom: 25px;
  width: 0;
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  left: 0;
  top: 0;
  background-color: #9ecbec;
  /* Black fallback color */
  background-color: #9ecbec;
  /* Black w/opacity */
  opacity: 0.8;
  overflow-x: hidden;
  /* Disable horizontal scroll */
  transition: 0.1s;
  /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
}
