@import '../../_coreStyles.scss';
$card-vertical-padding: $spacing-20;
$card-footer-padding: $spacing-12;

.bolt-card {
    border-radius: 4px;
    overflow: hidden;
    padding: $card-vertical-padding 0px;

    // IE11: Take off rounded corners on cards, they cause significant performance impact
    @include ie-only {
        border-radius: 0;
    }

    @include ms-high-contrast-override {
        border: solid 1px;
    }

    @include xsmall-screen {
        border-radius: 0;
    }
}

/// Apply this class name to a CustomCard which contains a CardHeader.
/// The CardHeader will have the appropriate vertical spacing, so this
/// className will remove the card's default padding-top.
/// @group card|header
.bolt-card-with-header {
    padding-top: 0px;
}

.bolt-card-content {
    overflow: auto;
}

.bolt-card-footer {
    padding-top: $card-footer-padding;
}

.bolt-card-no-vertical-padding {
    padding-top: 0px;
    padding-bottom: 0px;
}

.bolt-card-white {
    background-color: $calloutBackgroundColor;
}

/// Apply this class name to a card where the only content
/// is a table. The card can still have a Header / Footer,
/// but this class will get the card's padding correct.
/// @group card|table
.bolt-table-card {
    padding-bottom: 0px;
    padding-top: 0px;

    .bolt-card-header {
        padding-bottom: 0px;
    }

    &.no-column-headers .bolt-card-header {
        padding-bottom: $card-vertical-padding;
        border-bottom: 1px solid $neutral-8;
    }

    .bolt-card-content {
        padding: 0px;
    }

    .bolt-header-commandbar {
        flex: auto;
        overflow: auto;
    }
}

.bolt-button.bolt-card-expand-button {
    margin-left: $spacing-12;
    margin-top: $spacing-16;
    margin-right: $spacing-4;
}

.bolt-card-header-collapsible {
    padding-left: $spacing-8;
}

.bolt-card-expandable-header.bolt-card-expandable-header {
    padding-left: $spacing-8;
}

.bolt-card-header-collapsed.bolt-card-header-collapsed {
    padding-bottom: 0px;
}