@use "variables" as *;

:host {
    display: flex;
    height: 100%;
}

:host ::ng-deep dot-portlet-box {
    height: 100%;
}

.dot-apps__header {
    border-bottom: 1px solid $color-palette-gray-200;
    display: flex;
    justify-content: space-between;
    padding: 0 $spacing-4 $spacing-4;
    width: 100%;

    input {
        width: 31.42rem;
    }

    button:first-child {
        margin-right: $spacing-1;
    }
}

.dot-apps__header-actions {
    display: flex;
}

.dot-apps__header-info {
    align-self: center;
    display: flex;
    margin-right: $spacing-4;

    dot-icon {
        margin-right: $spacing-1;
    }
}

.dot-apps-configuration__action_import_button {
    margin-right: $spacing-1;
}

.dot-apps__body {
    display: grid;
    grid-gap: $spacing-4;
    grid-template-columns: repeat(auto-fill, minmax(23.42rem, 1fr));
    padding: $spacing-4;
    overflow: auto;
}

.dot-apps__container {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: hidden;
    background-color: $white;
    box-shadow: $shadow-m;
    padding-top: $spacing-4;
    font-size: $font-size-md;
}
