@import "../../../themes/core/variables";
@import "../../../themes/theme/variable";
@import "../../../themes/theme/mixins";
@import "../../../themes/qms-icon-font";

.select-access-paginator {
  max-height: 150px !important;
}

// .select-access-dialog-container {
// font-family: 'Open Sans';
.mat-expansion-panel .mat-expansion-panel-body {
  padding-top: 0px !important;
}

.mat-expansion-panel-header {
  font-weight: 800 !important;
  .title-content {
    font-size: 12px !important;
  }
}

.w-100 {
  width: 100%;
}

.h-100 {
  height: 100%;
}

.pointer {
  cursor: pointer;
}

.fw-600 {
  font-weight: 600;
}

.label-item {
  font-weight: 600;
  color: theme-apply($ws-text-primary);
}

.sub-label {
  color: theme-apply($ws-text-secondary);
}

.fs-14 {
  font-size: 14px;
}

.fs-12 {
  font-size: 12px;
}

.color-primary {
  color: theme-apply($primary-light) !important;
}

.header-title {
  font-weight: 600;
  color: theme-apply($ws-text-primary);
  font-size: 16px;
}

.mat-mdc-chip.chip-item-result {
  max-width: 250px;

  &.item-department {
    .qms-chip-body {
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}

.remove-chip-icon {
  cursor: pointer;

  &:hover {
    color: black(0.7);
  }
}
/* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
.mat-form-field-wrapper {
  padding-bottom: 8px !important;
}

.mat-expansion-panel {
  border-radius: unset !important;
}

.mat-expansion-panel-header:not([aria-disabled="true"]) {
  background: unset;
}

.mat-expansion-panel.mat-expanded .mat-expansion-panel-header {
  background: #e5eefb;
  .qms-line {
    color: theme-apply($primary-light) !important;
  }
}

.access-dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version.*/
.mat-chip-list-wrapper {
  margin: unset !important;
}

.item-list-wrapper {
  height: 40vh;
  padding: 4px 4px 4px 0;
  overflow-y: auto;
  &.no-result {
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .item {
    min-height: 40px;
  }
  .item-without-checkbox {
    min-height: 45px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    transition: background 0.3s ease;
    &.active {
      background: theme-apply($primary-light-12-opacity);
    }
    &:hover {
      background: theme-apply($primary-light-6-opacity);
    }
    .mat-icon {
      color: theme-apply($primary-light) !important;
    }
  }
}

.confirm__button__groups {
  .btn-add > .qms-btn-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.qms-dialog-content {
  display: grid;
  column-gap: 8px;
  &.active {
    grid-template-columns: 2fr 1fr;
    min-height: 50vh;
  }

  .access-dialog-wraper {
    .field-select-option {
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-wrapper {
        padding-bottom: 16px !important;
      }
      /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
      .mat-form-field-underline {
        bottom: 16px !important;
      }
    }
  }

  .result-wrapper {
    position: relative;
    width: 100%;
    margin-left: 8px;
    &::after {
      position: absolute;
      content: "";
      top: 0;
      left: 0;
      background-color: #0000001f;
      height: 100%;
      width: 1px;
    }
  }
  .result-selected-container {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow-y: auto;
    padding: 0 8px;
    // .mat-divider{
    //   margin-bottom: 12px;
    // }
    .result-header {
      height: 51px;
      display: flex;
      align-items: center;
      position: sticky;
      top: 0;
      z-index: 10;
      padding: 0 !important;
      background: white;
      margin-bottom: 12px;
      &::after {
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background: rgba(0, 0, 0, 0.04);
      }

      .mat-mdc-card-content {
        height: 51px;
        width: 100%;
        padding-left: 4px;
        display: flex;
        align-items: center;
        background-color: rgba(0, 0, 0, 0.04);
      }
    }
  }
}

.option-selected-content {
  .group-filter-person-option {
    display: flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
}

span.chip-item__content_name {
  display: inline-block;
  max-width: 175px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

span.chip-item-children__count {
  font-size: 0.75rem;
  color: black(0.5);
  font-weight: 600;
}

.mat-mdc-slide-toggle.qms-group-options {
  padding: unset !important;
}

.input-option-filter {
  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
  .mat-form-field-wrapper {
    padding-bottom: 8px !important;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
  .mat-form-field-underline {
    bottom: 8px !important;
  }
}

.slide-toggle {
  margin-bottom: 8px;
}

.confirm__button__groups.none-option {
  margin-top: 85px;
}

.btn-icon-clear {
  position: relative;
  padding: 0 1rem;
  .qms-btn-icon {
    margin-right: unset !important;
  }
  &::after {
    position: absolute;
    content: "";
    left: 0;
    top: 0;
    height: 100%;
    width: 1px;
    background: black(0.3);
  }
}

.qms-paginator {
  .mat-mdc-paginator-container .qms-total-result {
    margin-bottom: 0;
    margin-right: 12px;
    height: 100%;
    display: flex;
    align-items: center;
    span {
      font-weight: 600;
      color: black(0.8);
    }
  }
  .mat-mdc-paginator-container .qms-paginator-range-actions {
    margin-bottom: 0;
    column-gap: 2px;
    & > .qms-total-result {
      margin-bottom: 0;
    }
  }
  .qms-paginator-page-size {
    align-items: center;
  }
  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
  .mat-form-field-wrapper {
    padding-bottom: 0 !important;
  }
}
/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
.mat-mdc-checkbox.checkbox-all .mat-checkbox-label {
  flex-direction: row !important;
  align-items: center !important;
  column-gap: 4px !important;
}
.mat-expansion-panel.qms-expansion {
  margin: 0 !important;
}

.access-department {
  .qms-view-search-result {
    height: 100% !important;
    .result {
      max-height: calc(100% - 80px) !important;
    }
  }
  .loading-container {
    height: calc(100% - 40px) !important;
  }
}

// Loading animate
.qms-loading-container {
  height: 45vh;
  overflow: hidden;
  display: grid;
  grid-template-rows: repeat(60px);
  .qms-loader {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px 0;
    overflow: hidden;
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: linear-gradient(
        110deg,
        rgba(233, 233, 233, 0) 0%,
        rgba(227, 227, 227, 0) 40%,
        rgba(227, 227, 227, 0.5) 50%,
        rgba(227, 227, 227, 0) 60%,
        rgba(227, 227, 227, 0) 100%
      );
      animation: animate-loading 1.2s linear infinite;
    }
    &__wrapper {
      position: relative;
      width: 100%;
      height: 100%;
      .row-loader {
        background-color: #eeeeee;
        position: absolute;
        left: 0;
        width: 100%;
        height: 40px;
        overflow: hidden;
      }
    }
    @keyframes animate-loading {
      0% {
        transform: translateX(-100%);
      }

      100% {
        transform: translateX(100%);
      }
    }
  }
}

.btn-close-dialog.qms-btn-icon:focus:not(:hover) {
  background-color: unset !important;
  color: unset !important;
}
// }

.mdc-evolution-chip-set .mat-mdc-standard-chip {
  .mdc-evolution-chip__cell--primary,
  .mdc-evolution-chip__action--primary,
  .mat-mdc-chip-action-label {
    overflow: hidden;
  }
}