/*=============================================================================
  PERFORMANCE CHARACTERISTICS (TACKLE HAS REPLACED THIS WITH AWARDS)

  * Shows performance characteristics of products on desc page
=============================================================================*/

/* Performance Characteristics (Awards) */
.performance__header {
    display: flex;
    margin: 0;
    padding: 0 0 var(--spacing-04) 0;
}

.performance__header span {
    padding-right: var(--spacing-02);
}

.performance__header .icon-help {
    width: var(--icon-size-sm);
    height: var(--icon-size-sm);
    padding: var(--icon-size-sm) 0px 0px;
    background-size: var(--icon-size-sm);
    background-position: var(--icon-position-sm-black);
    margin-top: var(--spacing-01);
    cursor: pointer;
}

.performance__detail-wrapper:not(.is-range) {
    flex-direction: column;
}

.performance__detail-wrapper.is-range>.col.pills {
    padding-top: 0;
    border-top: none;
}

.performance__detail,
.performance__detail-wrapper.is-range {
    padding: 0 var(--spacing-06) var(--spacing-06) 0;
}

.performance__detail-wrapper.is-range .col {
    border-top: var(--spacing-01) solid var(--color-border-form-default);
    font-size: var(--text-body-sm);
    text-align: center;
    color: var(--color-text-secondary);
}

.performance__detail-wrapper.is-range .is-active {
    border-top: var(--spacing-01) solid var(--color-border-dark);
    color: var(--color-text-primary-dark);
}

.performance__detail-name {
    align-items: center;
}

.performance__detail-name .icon {
    margin-right: var(--spacing-03);
}

.performance__detail-name span {
    flex: 1 1;
    font: var(--text-body-sm);
    color: var(--color-text-primary-dark);
}

.performance__detail-wrapper:last-of-type {
    margin-bottom: var(--spacing-06);
}

.icon-header {
    display: flex;
    align-items: center;
}

.icon-header span {
    margin-left: var(--spacing-02);
    font-weight: bold;
}

.pill {
    padding: var(--spacing-02) var(--spacing-04);
    background-color: var(--color-surface-primary);
    color: var(--color-text-secondary);
    border: var(--border-weight-02) solid var(--color-border-primary);
    border-radius: var(--border-radius-lg);
    margin-right: var(--spacing-06);
    font: var(--text-body-sm);
}

.pill.active {
    color: var(--color-text-primary-dark);
    border: var(--border-weight-02) solid var(--color-border-primary-active);
}

/* Performance Modal */
.performance__details .header span {
    display: block;
}

.performance__details .header span:not(:first-child) {
    padding-top: var(--spacing-04);
}

.performance__details p {
    margin: 0 0 var(--spacing-06);
    padding-bottom: var(--spacing-06);
    border-bottom: var(--border-weight-01) solid var(--color-border-primary);
}

.performance__details .icon-header+p {
    margin: var(--spacing-04) 0 var(--spacing-06);
}

.performance__details p:last-of-type {
    border: none;
}

.performance__detail {
    width: 100%;
}

.performance__detail:last-of-type {
    padding-right: 0;
}

@media screen and (min-width: 576px) {

    .performance__detail-wrapper:not(.is-range) {
        flex-direction: row;
    }

    .performance__detail {
        width: 50%;
    }

}