@import "~@angular/material/theming";
@import '../../../variables.scss';

.settings_container {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.content_container {
  display: flex;
  flex-direction: row;
  height: 96%;
}

.dialog_content {
  flex-grow: 1;
}

.hidden {
  display: none;
}

.settings_categories, .rightNavigation {
  padding: 10px;
  height: 100%;
}

.settings_categories {
  padding-left: 0;
  padding-right: 0;

  max-width: 300px;
  min-height: 450px;

  overflow-y: scroll;

  mat-nav-list {
    min-height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: space-evenly;

    mat-list-item {
      flex-grow: 1;
    }
  }

  .mat-list-item-content {
    height: 100% !important;
    color: rgba(0, 0, 0, 0.5);
  }
}

.rightNavigation {
  flex-grow: 1;
  min-height: 450px;
  overflow-y: scroll;
  max-width: 80%;

  height: 100%;

  margin-left: 10px;
  padding: 0;

  section {
    margin-left: 15px;
  }

  h3 {
    margin: 0;
  }

  .rounded-container {
    margin-left: 0;
  }
}

.active_light {
  border-right: 4px solid mat-color($my-app-primary);

  .mat-list-item-content {
    color: black;
  }
}

.dark-theme {
  .mat-list-item-content {
    color: rgba(255, 255, 255, 0.5);
  }

  .active_dark {
    border-right: 4px solid mat-color($dark-primary);
  
    .mat-list-item-content {
      color: white;
    }
  }
}
