.dashkit-plugin-control {
    $class: &;
    display: flex;
    align-items: center;
    justify-content: center; // in particular for the loader
    height: 100%;
    width: 100%;
    min-height: 44px;

    background-color: var(--dl-color-dashkit-control-background, var(--g-color-base-float));
    border-radius: var(--dl-dk-controls-border-radius, var(--g-border-radius-xs));

    &_external {
        align-items: normal;
        display: block;
    }

    &__item {
        flex: 1;
        padding: 0 15px;
        overflow: hidden;
    }

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

        &_silent {
            background-color: var(--g-color-sfx-fade);
        }
    }

    &_mobile {
        min-height: 64px;

        #{$class}__item {
            padding: 10px 15px;
        }
    }
}

.dashkit_theme_datalens .dashkit-plugin-control {
    & .chartkit-base__header {
        right: 8px;
    }

    & .chartkit-control {
        padding: 0 15px 4px;
    }
}
