event-record-detail {
  display: block;
  background: #f0f0f0;

  .detail {
    &-header {
      display: flex;
      padding: 8px 8px 0;
      margin: 0;

      li {
        padding: 10px 15px;
        cursor: pointer;
        color: #1F6B7A;

        &:hover {
          background-color: #ecf0f1;
          color: #298fa3;
        }

        &.active {
          background: white;
          cursor: default;
          color: inherit;
        }

        + li {
          margin-left: 8px;
        }
      }
    }

    &-table {
      padding: 0 8px 8px;

      &-entry {
        display: flex;
        overflow-wrap: break-word;

        &:nth-child(odd) {
          background: white;
        }

        &-key {
          width: 200px;
          padding: 5px;
        }

        &-value {
          flex: 1;
          padding: 5px;
          word-wrap: break-word;
        }
      }
    }

    &-json {
      padding-bottom: 8px;

      > div {
        min-height: 320px;
      }
    }

    &-log {
      > header {
        margin: 8px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        > a {
          margin-left: 20px;
        }

        label {
          margin: 0 12px 0 0;
          font-weight: normal;
        }
      }

      .detail-table {
        margin-bottom: 0;

        &.nowrap {
          width: max-content;
        }

        &-wrap {
          overflow: auto;
          max-height: 400px;
          margin-bottom: 10px;
        }

        &-entry-key {
          width: 150px;
        }
      }

      .highlight {
        color: var(--global-theme-color-light, #03BDB4);
      }
    }
  }
}