.reporter {
  .hooks-container {
    margin: 5px 0 5px 5px;
    padding-left: 10px;
    border-left: 1px dotted #DDD;

    .hook-item {
      margin-bottom: 5px;

      &:last-of-type {
        margin-bottom: 0;
      }
    }

    .hook-header {
      display: flex;
      width: 100%;

      &:hover {
        .collapsible-header {
          color: #6a6b6c;
        }

        .hook-open-in-ide {
          display: block;
        }
      }

      .collapsible-header {
        text-transform: uppercase;
        color: #959595;
        display: inline-block;
        flex-grow: 1;
        font-size: 11px;
        cursor: pointer;
        padding: 4px 0;

        &:focus {
          outline: none;
        }

        > .collapsible-header-inner:focus {
          outline: 0;
        }
      }

      .hook-failed-message {
        color: #E94F5F;
        display: none;
      }

      .hook-open-in-ide {
        align-items: center;
        color: #6a6b6c;
        display: none;
        padding: 4px 10px;

        &:hover, &:focus {
          background-color: rgba(186, 186, 186, 0.2);
          outline: none;
          text-decoration: none;
        }
      }
    }

    i {
      margin-right: 3px;
    }

    .hook-failed .hook-failed-message {
      display: inline;
    }
  }
}