@import "variables";

:host {
  display: block;
  height: 100%;
  overflow: auto;

  ::ng-deep .mat-expansion-panel {
    box-shadow: none;
    color: $blue-400;
    border-radius: 0;

    .mat-expansion-panel-header {
      font-family: $font-family-base, sans-serif !important;
      font-size: 13px;
      font-weight: bold;
      padding: 0 12px;
      background: #fafafa;

      &.active {
        background-color: #e2e8ff !important;
      }

      .mat-expansion-indicator {
        height: 25px;
      }

      &.mat-expanded, mat-expanded:focus {


        .mat-expansion-indicator {
          height: 22px;
        }
      }

      .mat-content {
        padding-right: 10px;

        .mat-expansion-panel-header-title {
          margin: unset;
          color: $blue-400;
        }

      }
    }

    .mat-expansion-panel-content {
      font-family: $font-family-base, sans-serif !important;

      .mat-expansion-panel-body {
        padding: 0;

        li {
          &.list-item {
            padding: 0 30px 0 24px;
            line-height: 40px;
            list-style: none;

            &.even {
              background-color: #f9fafb;
            }

            &:hover {
              background-color: $blue-50;
              transition: background-color 0.2s;
            }
          }
        }
      }
    }
  }

  ::ng-deep .mat-expansion-panel-header-description {
    flex-grow: 0;
    color: $blue-400;
  }


  .selected {
    background-color: $purple;
    color: #ffffff;

    .icon {
      filter: brightness(0) invert(1);
    }
  }

  .artifact-container {
    padding: 10px 12px;
    font-size: 13px;
    font-weight: 500;
    display: flex;
    align-items: center;

    .icon, .al-icon {
      margin-right: 10px;
    }
  }

  .hide-output-model {
    visibility: hidden;
    height: 0;
    padding: 0;
  }
}
