@use "variables" as *;

:host {
    background: $color-palette-gray-200;
    box-shadow: $shadow-m;
    display: flex;
    height: 100%;
    padding: $spacing-4;
}

.dot-apps-configuration-detail__header {
    background-color: $white;
    position: sticky;
    top: 0;
    z-index: 1;
}

.dot-apps-configuration-detail-actions button:last-child {
    margin-left: $spacing-1;
}

.dot-apps-configuration-detail__body {
    flex-grow: 1;
}

.dot-apps-configuration-detail__host-name {
    border-bottom: 1px solid $color-palette-gray-300;
    color: $black;
    display: flex;
    justify-content: space-between;
    font-size: $font-size-lmd;
    font-weight: $font-weight-semi-bold;
    padding: $spacing-3;

    span {
        align-items: center;
        display: inline-flex;
    }
}

.dot-apps-configuration-detail__form-content {
    margin: $spacing-4;
}

.dot-apps-configuration-detail__container {
    background-color: $white;
    box-shadow: $shadow-m;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    width: 100%;
    font-size: $font-size-md;
}
