.reporter {
  // Mixin for dotted border line
  @mixin dotted-border-line($position: "top") {
    border-left: 1px dotted $gray-800;
    content: "";
    left: 16px;
    position: absolute;
    height: 8px;
    z-index: 1;

    @if $position == "top" {
      top: 0;
    } @else if $position == "bottom" {
      bottom: 0;
    }
  }

  .attempts {
    border-right: 1px solid $gray-800;
    border-bottom: 1px solid $gray-800;
    border-radius: 0 0 4px 4px;

    .attempt-item > .collapsible > .collapsible-header-wrapper {
      display: none;
    }

    &.has-multiple-attempts .attempt-item {
      > .collapsible > .collapsible-header-wrapper {
        display: flex;
      }

      &:not(:first-child) {
        > .collapsible .attempt-name:before {
          @include dotted-border-line("top");
        }
      }
      > .collapsible .attempt-name {
        &:after {
          @include dotted-border-line("bottom");
        }
      }
    }

    &.single-studio-test {
      border-right: none;
      border-bottom: none;
    }
  }

  .attempt-error-region {
    margin: 0 8.5px;
  }

  .attempt-item {
    > .collapsible {
      position: relative;

      > .attempt-name > .collapsible-header {
        .collapsible-header-inner {
          outline: none;
          display: flex;
          align-items: center;
          width: 100%;
          padding: 0;
        }
      }
    }

    > .is-open .open-close-indicator {
      svg.collapse-icon {
        display: block;
      }

      svg.expand-icon {
        display: none;
      }
    }

    .open-close-indicator {
      svg {
        margin-right: 3px;

        &.collapse-icon {
          display: none;
        }

        &.expand-icon {
          display: block;
        }
      }
    }

    .attempt-content {
      display: flex;
      margin-bottom: 6px;

      > div {
        width: 100%;
      }
    }

    &:not(:last-child) .attempt-name {
      border-bottom: 1px solid $gray-900;
    }
  }

  .attempt-name {
    display: flex;
    position: relative;
    width: 100%;

    .collapsible-header {
      width: 100%;
    }

    .attempt-tag {
      display: inline-flex;
      align-items: center;
      font-size: 14px;
      gap: 8px;
      width: 100%;
      padding: 8px;
      position: relative;
      user-select: none;
      cursor: pointer;

      &:hover {
        background-color: $gray-1100;
      }
      .attempt-tag-text {
        flex-grow: 1;
      }
    }

    .collapsible-more {
      display: none;
    }

    .attempt-tag > .attempt-state {
      margin-left: 3px;
      margin-right: 0;
    }
  }
}
