@use "variables" as *;

:host {
    box-shadow: $shadow-m;
    display: block;
    transition: box-shadow $basic-speed ease-in;
    border-radius: $border-radius-sm;

    &:hover {
        box-shadow: $shadow-s;
        cursor: pointer;
    }

    ::ng-deep {
        p-card {
            border-radius: $border-radius-sm;
        }

        .p-card {
            background: $white;
            height: 100%;

            .p-card-body {
                color: $color-palette-gray-700;

                .p-card-content > p {
                    line-height: 1.5rem;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    margin: 0 $spacing-3;
                }
            }
        }
    }
}

.dot-apps-card__disabled {
    background-color: $color-palette-gray-200;
    display: block;
    height: 100%;

    &:hover {
        background-color: $white;

        ::ng-deep {
            .p-card {
                background: $white;
            }

            .p-widget-content {
                background-color: $white;
            }
            img {
                filter: unset;
            }
        }
        .dot-apps-card__name {
            color: $black;
        }
    }

    ::ng-deep {
        .p-card {
            background: $color-palette-gray-200;
        }
        img {
            filter: grayscale(1);
        }
        .p-widget-content {
            background-color: $color-palette-gray-200;
        }
        .dot-apps-card__name {
            color: $color-palette-gray-700;
        }
    }
}

p-header {
    display: flex;
    padding-top: $spacing-4;
    align-items: flex-start;
}

p-avatar {
    border-radius: 50%;
    box-shadow: $shadow-l;
    margin: 0 $spacing-3 0;
}

.dot-apps-card__name {
    color: $black;
    display: block;
    flex: 1;
    font-size: $font-size-lmd;
    font-weight: bold;
    text-overflow: ellipsis;
    transition: color $basic-speed ease;
}

.dot-apps-card__label-container {
    position: relative;

    dot-icon {
        bottom: 0;
        color: $color-palette-primary;
        position: absolute;
        right: 0;
    }
}

.dot-apps-card__configurations {
    color: $color-palette-gray-700;
    display: block;
    font-size: $font-size-md;
    line-height: $spacing-3;
    margin-top: $spacing-1;
    margin-right: $spacing-4;
}
