@use '@vizality' as vz;

.vz-dashboard-section {
  $base: &;
  display: flex;
  flex: 1;
  flex-direction: column;
  &-contents {
    display: flex;
    flex-direction: column;
    flex: 1;
    > :first-child {
      margin-top: 0;
    }
  }
  & + & {
    margin-top: 40px;
  }
  &-header {
    line-height: 1.4;
    font-size: 24px;
    font-weight: 700;
    &-description {
      font-family: var(--font-primary);
      font-weight: 500;
      font-size: 18px;
      opacity: .8;
    }
    &-icon-wrapper {
      @include vz.size(24px);
      margin-right: 10px;
      color: var(--header-secondary);
    }
    p {
      margin: 0;
      line-height: 1.4;
    }
  }
  &[vz-collapsible] {
    background: var(--background-secondary);
    border-radius: 8px;
    #{$base}-header-wrapper {
      background: var(--background-tertiary);
      border-radius: 8px 8px 0 0;
      display: flex;
      align-items: center;
      padding: 20px;
    }                                                                                         
    #{$base}-contents {
      margin: 20px 40px;
    }
  }
}
