@import '../../Core/_platformCommon.scss';
$title-margin: $spacing-16;

// Easings
$ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
$ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);

// Panels
$panel-slide-duration: 200ms;
$panel-fade-duration: 100ms;
$panel-slide-distance: 200px;

@mixin out() {
    transform: translateX($panel-slide-distance);
    opacity: 0;
}

@mixin in() {
    transform: translateX(0);
    opacity: 1;
}

.bolt-panel-callout-content {
    margin: $spacing-16;
    border-radius: 6px;
    overflow: hidden;
    transition-property: transform, opacity;
    transition: transform $panel-slide-duration $ease-out-quart, opacity $panel-fade-duration $ease-out-cubic;

    @media screen and (-ms-high-contrast: active) {
        border: solid 1px;
    }

    &.bolt-callout-shadow {
        box-shadow: 0px 25.6px 57.6px $panelShadowColor, 0px 4.8px 14.4px $panelShadowSecondaryColor;
    }

    // TODO: Uncomment in M150
    /* &.in {
        @include in();
    }

    &.out {
        @include out();
    } */
}

.bolt-panel-description {
    margin-right: $spacing-20 + $title-margin;
    color: $secondary-text;
}

.bolt-panel-footer {
    min-height: 64px;
    overflow: hidden;
    padding-bottom: $spacing-16;
    padding-top: $spacing-16;
}

.bolt-panel-footer-buttons {
    justify-content: flex-end;

    //@OLD-PLATFORM-OVERRIDE font-size is globally set to 12px for old platform
    font-size: $fontSizeM;
}

.bolt-panel-content {
    overflow: auto;
    position: relative;
}

.bolt-panel-separator {
    height: 1px;
    background-color: $neutral-4;
}

.bolt-panel-overlay {
    background-color: $calloutBackgroundColor;
    opacity: 0.7;
}