/**
 * Styles for summary
 *
 * ATTENTION : the current styles are set to only display the summary in the app menu.
 */

@use "sass:math";

.summary {
    margin: 0;
    padding: 0;

    .step-children {
        padding-left: $summary-lvl-indent !important;
    }

    .summary-link-container {
        list-style: none;
        font-size: $summary-font;
        font-style: $summary-font-style;
    }

    .summary-link {
        display: flex;
        align-items: center;
    }

    .summary-link-actions {
        white-space: nowrap; // avoid buttons to be displayed in column
    }

    .btn-summary-primary,
    .btn-summary {
        border: none;
        font-size: $summary-font; // required to override default button size
        padding: ($grid-gutter-width * .5) 0;
    }

    .btn-summary-primary {
        flex: 1;
        display: flex;
        align-items: center;
        padding-left: $grid-gutter-width;
        padding-right: 5px;
        text-decoration: none;

        .action-icon {
            flex-shrink: 0;
        }

        .action-subscript {
            margin-left: auto;
        }
    }

    .btn-summary {
        padding-left: 5px;
        padding-right: 5px;
    }
}

// creates color variants
.app-menu .summary {
    @include summary-variant(
        $summary-link-color,
        $summary-link-bg,
        $summary-link-hover-color,
        $summary-link-hover-bg,
        $summary-link-active-color,
        $summary-link-active-bg,
        $summary-link-disabled-color,
        $summary-link-disabled-bg
    );
}

.app-content .summary,
.app-modal .summary {
    @include summary-variant(
        $link-color,
        $gray-lighter,
        $link-hover-color,
        $gray-lighter,
        $link-hover-color,
        $gray-lighter,
        $body-color,
        $gray-lightest
    );

    .summary-link {
        border-radius: $border-radius-sm;
        margin-top: 5px;
    }
}
