.request-list {


    &-item {

        // Header Section
        // --------------
        &-header {
            display: block;
            padding: .5em 1em;

            color: $request-item-active-color;
            background-color: $request-item-active-background;
            border: 1px solid $request-item-active-border-color;

            &:hover,
            &:active,
            &:focus {
                color: $request-item-active-color;
                text-decoration: none;
            }

            &.collapsed {
                background-color: $request-item-background;

                &:hover {
                    background-color: $request-item-hover-background;
                }

                &:hover,
                &:active,
                &:focus {
                    color: $request-item-color;
                }
            }

            &-row {
                display: block;
                & + & {
                    margin-top: .4em;
                }
            }

            &-method,
            &-uri,
            &-type,
            &-timestamp,
            &-size,
            &-ip {
                display: inline-block;
                .icon {
                    margin: 0 .2em;
                }
            }

            &-type,
            &-timestamp,
            &-size,
            &-ip {
                color: $request-item-secondary-color;
                font-size: $font-size-small;
            }

            &-method {
                font-weight: bold;
            }

            &-type,
            &-size {
                width: 30%;
            }

            &-ip,
            &-timestamp {
                float: right;
            }
        }

        // Detail section
        // --------------
        &-detail {

            background-color: $request-detail-background;
            border: 1px solid $request-item-border-color;
            padding: 1em;

            &-headers {
                @extend .table, .table-bordered;
                background: white;

                &-key {
                    width: 30%;
                }
            }

            &-body {
                margin-bottom: 1em;
            }

            &-button {
                @extend .button, .button-brand;
                display: block;
                margin-bottom: 1em;
            }
        }

        // Border overrides
        // ----------------

        // Remove bottom border from header for all but last request-item.
        &:not(:last-child) &-header {
            border-bottom: 0;
        }

        // Remove top border from detail element for last request-item.
        &:last-child &-detail {
            border-top: 0;
        }

        // Remove bottom border from detail element for all but last request-item.
        &:not(:last-child) &-detail {
            border-bottom: 0;
        }
    }
}