@import "variables";
:host-context(.normal-size){
  display: block;
  height: 480px;
}

:host {
  .actions {
    padding: 6px 0;
    font-size: 12px;
    color: $blue-480;
  }
  .metrics-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    min-height: 320px;
  }

  .head {
    margin-bottom: 12px;
    padding: 12px;
    display: grid;
    grid-template-columns: 20px 1fr 20px;
    gap: 6px;
    align-items: center;
    text-align: center;
    border-bottom: 1px solid $blue-200;
    min-height: 48px;
    h3 {
      color: $blue-400;
      font-size: 14px;
      font-weight: normal;
      margin: 0;
    }
  }

  sm-search {
    margin: 0 12px;
  }

  .variant-label {
    padding: 4px 6px;

    sm-checkbox-control {
      width: 100%;
    }
  }

  .value-type {
    display: flex;
    align-items: center;
    height: 42px;
    margin-left: 24px;
    padding-left: 18px;
    font-size: 11px;
    font-weight: bold;
    background-color: $blue-25;

    sm-checkbox-control {
      width: 100%;
      padding-right: 24px;

      ::ng-deep span.purple-v {
        transform: scale(0.9);
      }
    }
  }

  mat-expansion-panel {
    box-shadow: none;
    font-weight: bold;
    color: $blue-400;

    mat-expansion-panel-header {
      padding: 7px 24px 7px 4px;
      border-radius: 0;
      border-bottom: 1px solid $blue-100;

      &.mat-expanded {
        background-color: $blue-50;
        border-radius: 0;
        border-bottom: none;
        font-weight: bold;
      }

      .panel-title {
        padding-right: 12px;
        font-size: 13px;
        color: $blue-400;
      }
    }
  }

  ::ng-deep .mat-expansion-panel-body {
    padding: 4px 4px 0;
  }

  .metrics {
    height: calc(100% - 34px);
    width: 100%;
    overflow-y: scroll;
    padding-left: 12px;
  }

  .metric-expansion-content {
    li {
      &.list-item {
        padding: 0 47px 0 24px;
        line-height: 40px;
        list-style: none;

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

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

  .more-results {
    padding: 12px;
    font-weight: 500;
  }

  .spinner {
    margin: auto;
  }

  .empty-state {
    text-align: center;
    margin: auto;
    color: $blue-400;
    font-size: 14px;
  }
}
