@import '../../../styles/palette';
@import '../../../styles/spaces';

:host {
  .drawer-header {
    margin-bottom: $space-6;
  }

  .label {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: $space-4;
  }

  .headers {
    max-height: 50%;
    min-height: 30%;
    overflow-y: auto;

    .headers-table-detail {
      width: 100%;
      height: 100%;
      overflow-y: auto;
    }
  }

  .payload {
    display: flex;
    flex-direction: column;
    margin: $space-6 $space-0;
    overflow: auto;

    .key-section {
      display: flex;
      flex-direction: column;
      margin-bottom: $space-5;
    }

    .value-section {
      display: flex;
      flex-direction: column;
      flex: 2;
    }

    .message-payload {
      flex: 1;
      padding: $space-6;
      background: $main-10;
    }
  }

  .actions {
    gap: $space-5;
  }

  $type-colors: (
    string: $green-50,
    number: $green-50,
    boolean: $green-50,
    date: $green-50,
    array: $main-40,
    object: $main-40,
    function: $main-40,
    'null': $main-0,
    undefined: $main-0
  );

  @each $type, $color in $type-colors {
    ::ng-deep .segment-type-#{$type} > .segment-main > .segment-value {
      color: $color !important;
    }
  }

  ::ng-deep .segment-key {
    color: $blue-60 !important;
  }
}
