@use "mixins" as *;

// mat-expansion-panel / sln-card-panel — визуал через --PANEL-* в теме

@mixin panel-header-colors($bg, $color, $hover-bg) {
  background: #{$bg};
  color: #{$color};

  &:hover,
  &:focus {
    background: #{$hover-bg} !important;
  }

  .sln-card-panel__title,
  .sln-card-panel__title p {
    color: inherit;
  }
}

.sln-panel-wrap {
  .sln-card-panel {
    margin: 0 0 var(--PANEL-MARGIN-BOTTOM, 10px);
    box-shadow: var(--PANEL-SHADOW, 0 3px 10px rgba(0, 0, 0, 0.08));
    background: var(--PANEL-SURFACE-BG, var(--WHITE));

    .sln-card-panel__title {
      font-family: var(--font-bold);
      font-size: var(--PANEL-HEADER-FONT-SIZE, 14px);
      color: inherit;
      text-transform: var(--PANEL-HEADER-TEXT-TRANSFORM, uppercase);
      p {
        font-family: inherit;
        font-size: inherit;
        text-transform: var(--PANEL-HEADER-TEXT-TRANSFORM, uppercase);
        color: inherit;
        margin: 0;
      }
    }

    .sln-card-panel__body {
      padding: var(--PANEL-BODY-PADDING-Y, 10px) 0;
      font-size: var(--PANEL-BODY-FONT-SIZE, 14px);
      color: var(--PANEL-BODY-COLOR, var(--DARK-GREY));

      p {
        padding: 0 var(--PANEL-BODY-PADDING-X, 10px);
      }
    }
  }

  // контур панели (цвет рамки — --PANEL-BORDER-COLOR на .panel-*)
  .mat-expansion-panel.sln-card-panel:not([class*='mat-elevation-z']) {
    box-shadow: var(--PANEL-INNER-SHADOW, var(--PANEL-SHADOW, 0 1px 2px rgba(0, 0, 0, 0.12)));
    border-radius: var(--PANEL-RADIUS, 4px);
    overflow: hidden;
    border: var(--PANEL-BORDER-WIDTH, 0) solid var(--PANEL-BORDER-COLOR, transparent);
    background: var(--PANEL-SURFACE-BG, var(--WHITE));
  }

  .sln-card-panel.panel-default {
    --PANEL-BORDER-COLOR: var(--PANEL-DEFAULT-BORDER-COLOR, var(--LIGHT-GRAY));
  }

  .sln-card-panel.panel-primary {
    --PANEL-BORDER-COLOR: var(--PANEL-PRIMARY-BORDER-COLOR, var(--PRIMARY));
  }

  .sln-card-panel.panel-success {
    --PANEL-BORDER-COLOR: var(--PANEL-SUCCESS-BORDER-COLOR, var(--SUCCESS));
  }

  .sln-card-panel.panel-warning {
    --PANEL-BORDER-COLOR: var(--PANEL-WARNING-BORDER-COLOR, var(--WARNING));
  }

  .sln-card-panel.panel-danger {
    --PANEL-BORDER-COLOR: var(--PANEL-DANGER-BORDER-COLOR, var(--DANGER));
  }

  .sln-card-panel.panel-info {
    --PANEL-BORDER-COLOR: var(--PANEL-INFO-BORDER-COLOR, var(--INFO));
  }

  // header: общая вёрстка (один раз; не дублировать в .panel-*-header)
  .mat-expansion-panel-header {
    @include default-panel;
  }

  // свёрнута: header скруглён со всех сторон
  .mat-expansion-panel:not(.mat-expanded) .mat-expansion-panel-header {
    border-radius: var(--PANEL-RADIUS, 4px) !important;
  }

  // раскрыта: header только сверху
  .mat-expansion-panel.mat-expanded .mat-expansion-panel-header {
    border-radius: var(--PANEL-RADIUS, 4px) var(--PANEL-RADIUS, 4px) 0 0 !important;
  }

  .mat-expansion-panel:not(.mat-expanded),
  .mat-expansion-panel.mat-expanded {
    border-radius: var(--PANEL-RADIUS, 4px);
  }

  .mat-expansion-indicator {
    line-height: 0;
    color: var(--PANEL-INDICATOR-COLOR, var(--MIDLE-GRAY));

    &::after {
      color: var(--PANEL-INDICATOR-COLOR, var(--MIDLE-GRAY));
    }
  }

  .mat-expansion-panel-body {
    border-top: var(--PANEL-BODY-BORDER-TOP, 1px solid var(--LIGHT-GRAY));
    padding: var(--PANEL-BODY-PADDING-Y, 10px) var(--PANEL-BODY-PADDING-X, 0);
  }

  .sln-card-panel__title .sln-add-button {
    margin-left: 8px;
  }

  .mat-expansion-panel-header.panel-default-header {
    @include panel-header-colors(
      var(--PANEL-DEFAULT-HEADER-BG, var(--WHITE)),
      var(--PANEL-DEFAULT-HEADER-COLOR, var(--DARK-GREY)),
      var(--PANEL-DEFAULT-HEADER-HOVER-BG, var(--WHITE))
    );
  }

  .mat-expansion-panel-header.panel-primary-header {
    @include panel-header-colors(
      var(--PANEL-PRIMARY-HEADER-BG, var(--PRIMARY)),
      var(--PANEL-PRIMARY-HEADER-COLOR, var(--WHITE)),
      var(--PANEL-PRIMARY-HEADER-HOVER-BG, var(--PRIMARY))
    );
  }

  .mat-expansion-panel-header.panel-success-header {
    @include panel-header-colors(
      var(--PANEL-SUCCESS-HEADER-BG, var(--SUCCESS)),
      var(--PANEL-SUCCESS-HEADER-COLOR, var(--WHITE)),
      var(--PANEL-SUCCESS-HEADER-HOVER-BG, var(--SUCCESS))
    );
  }

  .mat-expansion-panel-header.panel-warning-header {
    @include panel-header-colors(
      var(--PANEL-WARNING-HEADER-BG, var(--WARNING)),
      var(--PANEL-WARNING-HEADER-COLOR, var(--WHITE)),
      var(--PANEL-WARNING-HEADER-HOVER-BG, var(--WARNING))
    );
  }

  .mat-expansion-panel-header.panel-danger-header {
    @include panel-header-colors(
      var(--PANEL-DANGER-HEADER-BG, var(--DANGER)),
      var(--PANEL-DANGER-HEADER-COLOR, var(--WHITE)),
      var(--PANEL-DANGER-HEADER-HOVER-BG, var(--DANGER))
    );
  }

  .mat-expansion-panel-header.panel-info-header {
    @include panel-header-colors(
      var(--PANEL-INFO-HEADER-BG, var(--INFO)),
      var(--PANEL-INFO-HEADER-COLOR, var(--WHITE)),
      var(--PANEL-INFO-HEADER-HOVER-BG, var(--INFO))
    );
  }
}

.ibox-tools {
  padding: 0 var(--PANEL-HEADER-PADDING-X, 15px);
  margin-bottom: var(--PANEL-MARGIN-BOTTOM, 10px);
}

.card-panel-buttons {
  display: flex;
  justify-content: flex-end;
}

// 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: var(--PANEL-BODY-PADDING-Y, 10px) 0;
}
