@use "mixins" as *;

.sln-panel-wrap {
  .sln-card-panel {
    margin: 0 0 10px 0;
    box-shadow:
      0px 3px 10px 0px rgba(0, 0, 0, 0.08),
      0px 0px 3px -4px rgba(0, 0, 0, 0.1),
      0px 1px 2px 0px rgba(0, 0, 0, 0.12);
    // default
    .sln-card-panel__header {
      @include default-panel;
      &:hover {
        background: white;
      }
    }
    .sln-card-panel__title {
      font-family: var(--font-bold);
      p {
        font-family: var(--font-bold);
        font-size: 14px;
      }
    }
    .sln-card-panel__body {
      padding: 10px 0;
      p {
        padding: 0 10px;
      }
    }
  }
  .mat-expansion-panel:not(.mat-expanded)
    .mat-expansion-panel-header:not([aria-disabled="true"]):hover {
    background: white;
  }
  .mat-expansion-panel-header.mat-expanded:focus,
  .mat-expansion-panel-header.mat-expanded:hover {
    background: white;
  }
  .mat-expansion-panel:not([class*="mat-elevation-z"]) {
    box-shadow:
      0px 1px 1px -4px rgba(0, 0, 0, 0.2),
      0px 1px 1px -1px rgba(0, 0, 0, 0.14),
      0px 1px 2px 0px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
  }
  .mat-expansion-indicator {
    line-height: 0;
  }
  .mat-expansion-panel-body {
    border-top: 1px solid var(--LIGHT-GRAY);
    padding: 10px 0;
  }
}
.ibox-tools {
  padding: 0 15px;
  margin-bottom: 10px;
}
.card-panel-buttons {
  display: flex;
  justify-content: flex-end;
}
// common panels wrapp
.panel-primary {
  border: 2px solid var(--PRIMARY);
}
.panel-success {
  border: 2px solid var(--SUCCESS);
}
.panel-warning {
  border: 2px solid var(--WARNING);
}
.panel-danger {
  border: 2px solid var(--DANGER);
}

.panel-info {
  border: 2px solid var(--INFO);
}

// common panels header
// default
.panel-default-header {
  @include default-panel;
  background: var(--WHITE);
  color: var(--DARK-GREY);
  &:hover,
  &:focus {
    background: var(--WHITE) !important;
  }
}
// primary
.panel-primary-header {
  @include default-panel;
  background: var(--PRIMARY);
  color: var(--WHITE);
  &:hover,
  &:focus {
    background: var(--PRIMARY) !important;
  }
}
// success
.panel-success-header {
  @include default-panel;
  background: var(--SUCCESS);
  color: var(--WHITE);
  &:hover,
  &:focus {
    background: var(--SUCCESS) !important;
  }
}
//warning
.panel-warning-header {
  @include default-panel;
  background: var(--WARNING);
  color: var(--WHITE);
  &:hover,
  &:focus {
    background: var(--WARNING) !important;
  }
}
//danger
.panel-danger-header {
  @include default-panel;
  background: var(--DANGER);
  color: var(--WHITE);
  &:hover,
  &:focus {
    background: var(--DANGER) !important;
  }
}
//info
.panel-info-header {
  @include default-panel;
  background: var(--INFO);
  color: var(--WHITE);
  &:hover,
  &:focus {
    background: var(--INFO) !important;
  }
}

// expanded panels grid
.expanded-element-detail {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition:
    max-height 225ms cubic-bezier(0.4, 0, 0.2, 1),
    opacity 225ms cubic-bezier(0.4, 0, 0.2, 1);
}

.expanded-element-detail.expanded {
  max-height: max-content;
  opacity: 1;
  padding: 10px 0;
}
