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

.bolt-panel-callout-content {
    margin: $spacing-16;
    border-radius: 6px;
    overflow: hidden;

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

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

        @include theme-high-contrast {
            border: 2px solid $focus-border-color;
        }
    }

    &.bolt-panel-fullscreen {
        margin: 0px;
        max-height: none;
        max-width: none;
        height: auto;
        width: auto;
        border-radius: 0px;
    }
}

.bolt-panel-resizable {
    position: relative;
}

.bolt-panel-resize-handle {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    cursor: col-resize;
    z-index: 1;
    outline-width: 0;
    user-select: none;
    background-color: transparent;

    &:hover,
    &:active {
        background-color: $neutral-8;
    }

    .bolt-focus-visible &:focus {
        background-color: $neutral-8;
        outline: 1px solid $focus-border-color;
        outline-offset: -1px;
    }
}

.bolt-panel-callout-content.bolt-panel-resizing {
    user-select: none;
    cursor: col-resize;
}

body[data-resize-active="true"] {
    cursor: col-resize !important;
    user-select: none;
}

.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 {
    position: relative;
    min-height: 64px;
}

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

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

.bolt-panel-header {
    .bolt-header-content-area {
        @include xsmall-screen {
            flex-wrap: nowrap;
        }
    }

    .bolt-header-title {
        @include xsmall-screen {
            white-space: normal;
            word-break: break-word;
        }
    }
}