@import '../../../styles/mixins.scss';

$dashContainerClassName: '.dash-body';
$dashPublicContainerClassName: '.dash';

$hintOffset: 3px;

$widgetBgColor: var(--g-color-base-float);

.dl-widget {
    #{$dashContainerClassName} &,
    #{$dashPublicContainerClassName} & {
        background-color: $widgetBgColor;
    }

    &__overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        z-index: 1;

        &_move {
            cursor: move;
        }
    }

    &__chart-title-text {
        text-overflow: ellipsis;
        overflow: hidden;
        display: block;

        &_with-hint {
            display: inline-block;
            vertical-align: middle;
            max-width: calc(100% - #{$hintOffset} - 16px);
        }
    }

    &__chart-title-wrap {
        display: flex;
        align-items: center;
    }

    // hide in sheet only
    .g-sheet__sheet &__chart-title-hint {
        display: none;
    }

    &__chart-title-hint {
        margin-left: $hintOffset;
        display: inline-flex;
    }

    // styles for widgets with tabs below

    #{$dashPublicContainerClassName} &__container &__body_table,
    #{$dashContainerClassName} &__container &__body_table {
        padding: var(--dl-dk-table-padding);
    }

    #{$dashPublicContainerClassName} &:not(&_no-tabs) &__container &__body_table,
    #{$dashContainerClassName} &:not(&_no-tabs) &__container &__body_table {
        padding-top: 0;
    }

    #{$dashPublicContainerClassName} &__container_table .chartkit-loader__loader_compact,
    #{$dashContainerClassName} &__container_table .chartkit-loader__loader_compact {
        top: -42px;
        right: 35px;
    }

    // style for widgets with auto height

    // Resetting height 100% for errors
    // if autoHeight enabled there error doesn't shrink if container is bigger than error itself
    #{$dashPublicContainerClassName} &_autoheight .datalens-chartkit-error,
    #{$dashContainerClassName} &_autoheight .datalens-chartkit-error {
        height: auto;
    }

    /** styles for flat controls */
    &__controls-corner-wrapper {
        background-color: $widgetBgColor;
        border-radius: var(--g-border-radius-m);
        margin-left: 8px;
        padding: 0px;
        display: flex;
        column-gap: 0px;
        opacity: 1;
        transition: opacity 0.3s ease-out;

        & .dl-widget__filter-button {
            opacity: 0.75;
        }
    }

    & .chartkit-menu__switcher {
        display: none;
    }

    &:hover &__controls-corner-wrapper {
        background-color: $widgetBgColor;

        & .chartkit-insights__button {
            opacity: 1;
        }

        & .dl-widget__filter-button:hover {
            opacity: 1;
        }

        & .chartkit-menu__switcher {
            display: block;
        }
    }

    &__controls-corner-wrapper:has(.chartkit-menu__switcher-button_opened)
        .chartkit-menu__switcher {
        display: block;
    }

    .widget-header_mobile &__controls-corner-wrapper {
        background-color: $widgetBgColor;

        & .chartkit-insights__button,
        & .dl-widget__filter-button {
            opacity: 1;
        }

        & .chartkit-menu__switcher {
            display: block;
        }
    }

    #{$dashPublicContainerClassName} &_pulsate &__container,
    #{$dashContainerClassName} &_pulsate &__container {
        background-color: $widgetBgColor;
        @include loading-pulsate-animation-style();
    }

    &__chartkit-inner-loader,
    &__mobile-loading-dummy,
    #{$dashPublicContainerClassName} &_loading-mobile-height,
    #{$dashContainerClassName} &_loading-mobile-height {
        min-height: 400px;
    }

    &__loader {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 3; // to overlay Datepicker
    }
}
