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

.dashkit-plugin-group-control {
    $class: &;

    display: block;
    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));

    &_pulsate &__container {
        @include loading-pulsate-animation-style();
    }

    &__header {
        margin-top: 8px;
        width: 100%;
    }

    &_static {
        display: flex;
        align-items: center;

        #{$class}__container {
            flex: 1;
        }
    }

    &__container {
        padding: 0 5px 0 15px;
    }

    &__locked {
        position: absolute;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        background-color: transparent;
        z-index: 3; // to overlay Datepicker
    }

    &__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
        background-color: var(--g-color-sfx-fade);
    }

    &__controls {
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 8px;
        align-items: flex-end;
    }

    &__controls-title {
        display: block;
        width: 100%;
    }

    &__control-container {
        display: contents;
        position: relative;
    }

    &__item,
    &__item-stub {
        margin-top: 8px;
        max-width: 100%;
        padding: 0;
        padding-right: 10px;
    }

    // TODO: move styles to Items.scss after removing old selectors code
    &__item {
        &_button,
        &_checkbox {
            align-self: center;
        }
    }

    &__item-stub {
        height: 28px;
        display: inline-flex;
        vertical-align: middle;
        justify-content: center;

        &_error {
            max-width: unset;
        }
    }

    &__item-label {
        max-width: 50%;
        flex-shrink: 0;

        &_vertical {
            max-width: 100%;
        }
    }

    &_mobile {
        #{$class}__container {
            padding: 0 10px 10px;
        }

        #{$class}__controls {
            flex-direction: column;
            align-items: center;
        }

        #{$class}__item {
            padding-right: 0;
            margin-top: 10px;
        }

        #{$class}__item_checkbox {
            padding: 4px 0;
        }

        #{$class}__item-label {
            max-width: 95%;
        }
    }
}
