$audit-group-height: 40px;

.audit-indicators {
    margin-top: 5px;
    padding: 0 10px;
    background: #fff;
    font-size: 1rem;
    background-color: #fff;
    border-color: #475d8d;

    &.active {
        background-color: #f0f0f0;
    }

    @media screen and (min-width: $screen-sm-min) {
        display: inline-block;
        margin: 0;
    }

    .search-meta & {
        margin: 5px 0 5px 5px;
    }

    &.audit-search {
        font-size: 0.85rem;
        margin-left: auto;
    }

    // Styling when inside .item-accessories <div>
    .item-accessories & {
        margin-right: auto;
    }
}

// Audit icon for display only
%audit-icon {
    display: inline-block;
    margin-right: 10px;
    font-size: 1.3rem;
    text-align: center;
    border: none;
    background-color: transparent;
    vertical-align: middle;

    &:first-child {
        margin-left: 0;
    }

    .audit-search & {
        font-size: 0.85rem;
    }
}

// Audit icon that's clickable as well as displayable
%audit-active-icon {
    @extend %audit-icon;

    margin: 0 5px 2px 0;
}

// Connect audit types to fontawesome icon suffixes and colors.
// Set audit type icons and colors here.
// Icon names are for font-awesome and are suffixed to 'icon-'.
// BG colors automatically generated from the FG colors set here.
$audit-types:
    ("error", warning, #cc0700),
    ("warning", circle, #e0e000),
    ("not_compliant", file-text, #ff8000),
    ("internal_action", ambulance, #a0a0a0),
    ("ok", check, #4c994c);

// Function for an inverse curve; used for saturation and lightness of backgrounds
@function inverse-curve($value) {
    @return (1 / ($value + 9.1)) * -800 + 109.1;
}

// Calculate bg color based on color using inverse function
@function fg-to-bg-color($basecolor) {
    @return hsl(hue($basecolor), inverse-curve(saturation($basecolor)), inverse-curve(lightness($basecolor)));
}

@function audit-level-color($basecolor) {
    @if lightness($basecolor) <= 40 {
        @return $basecolor;
    }

    @else {
        @return darken($basecolor,10%);
    }
}

// Wraps around audit count display
.audit-counts {
    white-space: nowrap;

    @at-root #{&}__level {
        display: inline-block;
        margin-left: 10px;
        font-weight: bold;
        white-space: nowrap;

        &:first-child {
            margin-left: 0;
        }
    }
}

.audit-detail__trigger {
    flex: 0 0 $audit-group-height;
    height: $audit-group-height;
    width: $audit-group-height;

    .collapsing-title {
        display: flex;
        padding: 0;
        width: 100%;
        height: 100%;
        align-items: center;
        justify-content: center;

        .collapsing-title-control {
            display: block;
        }
    }
}

// Area that toggles appearance when audit indicators are clicked on.
.audit-detail {
    margin-top: 10px;
    margin-bottom: 10px;
    border: 1px solid #a0a0a0;
    border-radius: 3px;

    @at-root #{&}__summary {
        display: flex;
    }

    @at-root #{&}__category-name {
        font-weight: bold;
        font-size: 1.1rem;
        color: #606060;
    }

    @at-root #{&}__info {
        flex: 1 1 auto;
        padding: 4px 10px;
        font-size: 1rem;
        line-height: $audit-group-height - 10;
        border-left: 1px solid #a0a0a0;
    }

    // When audit details appear on individual page, not search results.
    .result-table & {
        margin-top: 0;
    }
}

// Generate the audit icon classes for each of the audit types
@each $audit-type, $suffix, $color in $audit-types {
    // Audit icons
    .audit-icon-#{$audit-type} {
        @extend .icon-#{$suffix}; // FontAwesome icon
        @extend %audit-icon;

        color: $color;
    }

    .audit-icon-#{$audit-type}-badged {
        @extend .icon-#{$suffix}; // FontAwesome icon
        @extend %audit-icon;

        color: #fff;
        font-size: 0.7rem;
        line-height: 1;
        padding: 0 5px;
    }

    // Clickable audit icons
    .audit-activeicon-#{$audit-type} {
        @extend .icon-#{$suffix}; // FontAwesome icon
        @extend %audit-active-icon;

        color: $color;
        font-size: 1.2rem;
    }

    // Button for each class of audit error
    .audit-counts__level--#{$audit-type} {
        color: audit-level-color($color);
    }

    // Audit detail
    .audit-detail__#{$audit-type} {
        border-top: 1px solid #a0a0a0;
        background-color: fg-to-bg-color($color);

        &:first-child {
            border-top: none;
        }
    }

    .audit-detail__trigger--#{$audit-type} {
        &:hover {
            background-color: darken(fg-to-bg-color($color), 10%);
        }
    }

    .audit-item-#{$audit-type} {
        padding: 7px 10px 7px 50px;
        background-color: darken(fg-to-bg-color($color), 10%);
        border-top: 1px solid #a0a0a0;
        font-weight: 400;
        font-size: 1rem;
    }
}

.audit-details-section {
    position: relative;
}

.audit-details-decoration {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3) inset;
    pointer-events: none;
}

.audit-category {
    @extend .sentence-case;

    display: inline;
}

.audit-link {
    display: block;
}

.btn-info-audit {
    display: inline-block;
    margin-left: 10px;
    vertical-align: middle;
    font-size: 1.2rem;

    .icon {
        color: #a0a0a0;

        &:hover {
            color: #428bca;
        }
    }
}

.audit-icon {
    height: 13px;
    line-height: 13px;
}
