ejplatform/ej-server

$clusters-button-height: 2.313rem;

#hr-divider {
  border: 1px solid $color-theme-report-gray; 
  margin: 1.4rem 0 1.6rem;
}

#cluster-filter {
  display: grid;
  grid-template-columns: 2.313rem auto;
  grid-gap: 1rem;
  margin-bottom: 0;

  & > * {
    overflow: hidden;
  }
}

.form-elements {
  display: flex;
  gap: 2.312rem;
  text-align: left;

  & > * {
    width: 50%;
  }
}

.form-cluster-description {
  
  form {
    display: grid;
    grid-gap: 1rem;
    grid-template-rows: 1.187rem auto 1.187rem 1fr; 
    margin: 0;
  }

  label {
    text-indent: unset; 
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.188rem;
    margin-bottom: 0;
  }

  ul.errorlist {
      position: relative;
      bottom: 0.813rem;
      color: $colot-errolist-red;
      font-size: 0.625rem;
      font-weight: 400;
      font-style: italic;
      list-style: none;
      margin: 0;
      text-align: right;
  }

  input, textarea {
    border: 1px solid $color-bright-blue;
    box-sizing: border-box;
    border-radius: 0.313rem;
    margin: 0 !important;
    max-width: unset;
  }

  textarea {
    height: 100%;
  }

  #cluster-name::placeholder, #cluster-description::placeholder {
    color: $color-complementary-gray;
    font-size: 0.875rem;
  }
}

.form-cluster-personas {
  position: relative;
  display: grid;
  grid-row-gap: 1rem;
  grid-template-rows: 1.187rem 11.5rem auto auto auto;

  #stereotypes_label {    
    font-weight: bold;
    font-size: 1rem;
    line-height: 1.188rem; 
    text-indent: unset;

    img {
      height: 13px;
      align-self: center;
    }
  }

  .disable-tooltip {
    display: none !important;
  }
  
  .tooltip-persona {
    width: fit-content;
    height: 1.375rem;
    background: $color-tooltip-red;
    padding: 0.25rem 0.375rem;
    display: inline-block;

    p {
      font-weight: 600;
      font-size: 0.625rem;
      line-height: 0.75rem;
      color: $color-black-alternative;
      text-transform: initial;
    }
  }

  .new-persona-shortcut {
    display: flex; 
    gap: 1rem;

    #new_persona_check { 
      z-index: 0;
      position: absolute;
      left: 0.375rem;
    }
    input[type='checkbox']::before {
      height: 0.9em;
      bottom: 0;
    }
  }

  #new-persona-text {
    display: inline-grid; 
    position: relative;
    left: 2.25rem;
    bottom: 0.313rem;

    .label-new-persona {
      margin-bottom: 0; 
      font-weight: bold;
      font-size: 0.875rem;
      line-height: 1rem; 
      color: $color-black-alternative; 
      text-indent: unset; 
      text-transform: none;
    }

    #text-new-persona {
      font-size: 0.875rem;
      text-align: left; 
    }
  }

  .btn-container {
    display: grid;
    justify-content: flex-end;
  }
}

.hint {
  font-style: italic;
  font-size: 0.875rem;
  line-height: 1rem;
  color: $color-complementary-gray;
  text-align: left;
}

.title-cluster {
  font-size: 1.5rem;
  line-height: 1.813rem;
  margin: 1.8rem 0 .8rem;
  text-align: left;
}

.personas-list {
  select#id_stereotypes {
    padding: .3rem .5rem !important;
    border: 1px solid $color-bright-blue;
    box-sizing: border-box;
    height: 100%;
    max-width: unset;
    border-radius: 0.313rem;
    scrollbar-width: auto;
    scrollbar-color: $color-bright-blue transparent;

  option {
    margin: 0.438rem 0;
    padding: .9rem 0.25rem;
    font-weight: bold;
    color: $color-complementary-gray;
  }
}
  select {
    margin: 0;
  }

  select::-webkit-scrollbar {
    width: 0.875rem;
  }

  select::-webkit-scrollbar-track {
    background-color: $color-white;
  }
    
  select::-webkit-scrollbar-thumb {
    background-color: $color-bright-blue;
    border-radius: 0.625rem;
    border: 5px solid $color-white;
  }
}

#cluster-select {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  max-height: 6.62rem;
  overflow-y: auto;
  padding-bottom: 0.188rem;
  padding-right: .5rem;
  text-align: left;
  scrollbar-width: auto;
  scrollbar-color: $color-bright-blue transparent;
}

#cluster-select::-moz-focus-inner {
  border: 0;
}

#cluster-select::-webkit-scrollbar {
  width: 0.875rem;
}

#cluster-select::-webkit-scrollbar-track {
  background-color: $color-white;
}

#cluster-select::-webkit-scrollbar-thumb {
  background-color: $color-bright-blue;
  border-radius: 0.625rem;
  border: 5px solid $color-white;
}

#new-button {
  display: flex;
  place-items: center;
  justify-content: center;
  color: $color-white;
  background: $color-pink-light;
  border: 3px solid $color-pink-light;
  box-sizing: border-box;
}

.options-groups {
  width: fit-content;
  border: 3px solid $color-theme-report-gray;
  color: $color-theme-report-gray; 
  background-color: $color-white;
  text-transform: lowercase;
  padding: 0 0.9rem;
  display: flex;
  place-items: center;
}

.select-button {
  height: $clusters-button-height;
  background-color: $color-bright-blue;
  color: $color-white;
  border: 3px solid $color-bright-blue;
}

#new-button {
  width: 100%;
  padding: 0;
}

#new-button, .options-groups {
  font-size: 1.25rem;
  font-weight: bold;
  text-align: center;
  margin-bottom: 0;
  cursor: pointer;
  border-radius: 0.313rem;
}

.no-cluster {
  background-color: $color-theme-report-gray;
  color: $color-white;
  cursor: default;
}

.close-modal-btn {display: none;}

// EDIT ELEMENTS

.edit-buttons {
  display: flex;
  gap: 1.875rem;
  justify-content: center;

  input {
    line-height: 0;
  }

  #save-edit {
    display: flex;
    place-items: center;
    justify-content: center;
    gap: .5rem;
    border-radius: 1.5rem; 
    font-size: 0.875rem;
    padding: 1.37rem 1.54rem;
    width: min-content;
    background-color: $color-theme-report-blue;
    border: 1px solid $color-theme-report-blue;
    margin-top: 1rem; 
  
    i {
      font-size: 0.875rem;
      margin: 0;
    }
  }

  .delete-group {
    display: flex;
    place-items: center;
    justify-content: center;
    background: $color-red-negative;
    border: 1px solid $color-red-negative;
    border-radius: 1.563rem;
    font-size: 0.875rem;
    padding: 1.37rem .9rem;
    line-height: 1rem;
    margin: 0;
    margin-top: 1rem;
    
    i {
      margin: 0.313rem;
    }
  }

  .divider-mobile {
    display: none;
  }
}

.manage-personas {
  display: flex;
  place-items: center;
  justify-content: center;
  font-size: 0.875rem;
  padding: 1.37rem 1.063rem;
  width: 13.875rem; 
  background: $color-theme-report-blue;
  border: 1px solid $color-theme-report-blue;
  border-radius: 1.563rem;
  margin: 0;
  margin-top: 1rem;

  i {
    transform: rotate(45deg);
    margin: 0.5em;
  }
}

.manage-personas:hover {
  background-color: $color-theme-report-blue !important;
}

.manage-personas-container {
  position: relative;
  bottom: 4.625rem;
  width: fit-content;
}

.create-group-btn {
  display: flex;
  place-items: center;
  justify-content: center;
  gap: .5rem;
  border-radius: 1.5rem; 
  font-size: 0.875rem;
  padding: 1.37rem 1.54rem;
  width: min-content;
  background-color: $color-theme-report-blue;
  border: 1px solid $color-theme-report-blue;

  i {
    font-size: 0.875rem;
    margin: 0;
  }
}

.disable-div { 
  color: $color-complementary-gray !important;
}

.save-edits-btn {
  background-color: $color-complementary-gray !important;
  border: 1px solid $color-complementary-gray !important;
}

.form-modal-delete-show {
  display: block;
}
  
@media (max-width: 875px) {
  .edit-content {
    padding: 0 1.5rem;
  }

  #new-button, .options-groups {
    font-size: 1rem;
  }

  .form-elements {
    display: block;

    & > * {
      width: auto;
    }
  }

  .form-cluster-description {
    #cluster-new {
      margin-bottom: 0;
    }
  }

  .form-cluster-personas {
    margin-top: 1rem;

    .new-persona-shortcut {
      margin-top: 0;

      #new_persona_check { 
        left: 0;
      }
    } 

    #new-persona-text {
      left: 1.875rem;
      width: 90%;
    }

    .tooltip-persona {
      position: absolute;
      height: 30px;
    }

    .btn-container {
      justify-content: center;
    }
  }

  .personas-list {
    select[multiple] {
      padding: .3rem .25rem .3rem 0.6rem !important;
    }
  }
  
  .new-group-modal {
    left: 15%;
    top: 15%;
    width: 70%;
  }

  .edit-buttons {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 0;

    #save-edit {
      margin-bottom: 2.625rem;
    }

    .delete-group {
      margin-top: 1.938rem;
      margin-bottom: 0.938rem;
    }
  }

  .divider-mobile {
    border: 1px solid #BABABA;
    display: block;
    width: 100%;
  }

  .manage-personas-container { 
    bottom: .625rem;
    display: flex;
    justify-content: center;
    margin-bottom: 1rem;
  }
  
  .confirmation-modal {
    width: 80%;
    padding: 1.5rem;
    left: 66%;
    top: 80%;

    .modal-confirmation-container {
      button.delete, button.return {
        font-size: .75rem;
      }
    }
  }
  
}

@media (max-width: 996px) and (min-width: 524px) {
  .edit-buttons {
    display: flex;
    place-self: center;
    gap: 0;

    .divider-mobile {
      border: 1px solid #BABABA;
      display: block;
      width: 100%;
    }
  }

  .form-cluster-description {
    form {
      grid-template-rows: 1.187rem auto 1.187rem 18.563rem;
    }
  }

  .manage-personas-container {
    bottom: 0;
  }
  
}

@media (max-width: 996px) and (min-width: 876px) {
  .edit-buttons {
    display: flex;
    flex-wrap: wrap-reverse;
    gap: 0;

    .divider-mobile {
      border: 1px solid #BABABA;
      display: block;
      width: 100%;
    }
  }

  .manage-personas-container {
    margin-right: 0.625rem;
    float: right;
  }
}

@media (min-width: 1400px) {
  .new-group-modal {
    left: 22%;
    top: 25%;
  }

  .confirmation-modal {
    top: 50%;
  }
}