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


.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: floor(@grid-gutter-width / 2) 0;
    }

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

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

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

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

// creates color variants
.app-menu .summary {
    .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 {
    .summary-variant(
        @link-color,
        @gray-lighter,
        @link-hover-color,
        @gray-lighter,
        @link-hover-color,
        @gray-lighter,
        @text-color,
        @gray-lightest
    );

    .summary-link {
        border-radius: @border-radius-small;
        margin-top: 5px;
    }
}

.summary-variant(@link-color, @link-bg, @link-hover-color, @link-hover-bg, @link-active-color, @link-active-bg, @link-disabled-color, @link-disabled-bg) {
    .summary-link {
        background-color: @link-bg;

        &:hover {
            background-color: @link-hover-bg;
        }

        &.active,
        &:focus {
            color: @link-active-color;
            background: @link-active-bg;
        }
    }

    .btn-summary-primary,
    .btn-summary {
        color: @link-color;

        &:hover {
            color: @link-hover-color;
            background: @link-hover-bg;
        }

        &:focus,
        &:active,
        &.active {
            &,
            &:hover,
            &:focus {
                color: @link-active-color;
                background: @link-active-bg;
            }
        }

        &[disabled],
        &.disabled {
            // avoid focus or hover effect on disabled
            &,
            &:hover,
            &:focus {
                color: @link-disabled-color;
                background: @link-disabled-bg;
            }

            // preserve active state on disabled (because active links are disabled)
            &.active {
                &,
                &:hover,
                &:focus {
                    color: @link-active-color;
                    background: @link-active-bg;
                    opacity: 1;
                }
            }
        }
    }
}
