@import 'popup-base.component';

.PopupContent {
  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: ;
  height: 100%; // 100% view height
  grid-template-rows: repeat(3, 42px) auto; // row relationships
  grid-template-columns: repeat(2, minmax(1px, 300px)) auto; // column relationship
  grid-column-gap: 15px;
  grid-row-gap: 15px;
  grid-template-areas:
    'input-webapp input-adddepartment input-addrole'
    'input-department input-adddepartment input-addrole'
    'input-role input-adddepartment input-addrole'
    'buttons buttons buttons'
}

.input-department {
  grid-area: input-department;
}

.input-adddepartment {
  grid-area: input-adddepartment;
}

.input-addrole {
  grid-area: input-addrole;
}

.input-webapp {
  grid-area: input-webapp;
}

.input-role {
  grid-area: input-role;
}
