@use "variables" as *;

:host {
    background-color: $white;
    border-bottom: 1px solid $color-palette-gray-300;
    display: flex;
    padding: $spacing-4 $spacing-4 $spacing-4 0;
    position: sticky;
    top: 0;
    z-index: 1;

    p-avatar {
        align-self: baseline;
        border-radius: 50%;
        box-shadow: $shadow-s;
        cursor: pointer;
        margin: 0 $spacing-4 0 $spacing-4;
    }
}

.dot-apps-configuration__data {
    width: 100%;

    header {
        display: flex;
        align-items: center;
    }
}

.dot-apps-configuration__service-name {
    color: $black;
    cursor: pointer;
    display: inline-block;
    font-size: $font-size-xl;
    font-weight: bold;
    margin: 0;
}

.dot-apps-configuration__service-key {
    color: $color-palette-gray-700;
    display: inline-block;
    font-size: $font-size-lmd;
    margin-left: $spacing-3;
    display: flex;
    align-items: center;

    dot-copy-link {
        margin-left: $spacing-1;
    }
}

.dot-apps-configuration__configurations {
    color: $color-palette-gray-700;
    display: block;
    margin-bottom: $spacing-3;
    margin-top: $spacing-1;
}

::ng-deep {
    .dot-apps-configuration__description {
        max-width: 64.25rem;
        position: relative;
    }

    .dot-apps-configuration__description p {
        margin: 0;
        overflow: hidden;
        line-height: 1.5;
    }

    .dot-apps-configuration__description__link_show-more {
        background-color: $white;
        cursor: pointer;
        font-size: $font-size-lmd;
        padding-left: $spacing-1;
        position: absolute;
        bottom: 0;
        right: 0;
        z-index: 1;
    }

    .dot-apps-configuration__description__show-more p {
        height: auto;
        overflow: visible;

        .dot-apps-configuration__description__link_show-more {
            position: relative;
            top: 0;
        }
    }
}
