@use "variables" as *;
@import "mixins";

$information-min-height: 60px;
$information-row-min-height: 76px;
$skeleton-min-height: 14px;

:host {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
}

.content-aside__information {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
}

.content-aside__status {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.content-aside__metadata {
    display: flex;
    flex-direction: column;
    gap: $spacing-1;
    width: 100%;
}

a.sidebar-card {
    text-decoration: none;
}

.sidebar-card__content-type {
    transition: background-color $basic-speed ease;
    min-height: $information-min-height;

    &:hover {
        background-color: $color-palette-primary-100;
    }
}

.sidebar-card {
    padding: $spacing-1;
    display: flex;
    flex-direction: column;
    gap: $spacing-0;
    background: $white;
    border-radius: $border-radius-lg;
    width: 100%;

    &__title {
        font-size: $font-size-md;
        font-weight: $font-weight-bold;
        color: $black;
        line-height: $line-height-relative;
    }

    &__subtitle {
        font-size: $font-size-md;
        color: $color-palette-gray-800;
        line-height: $line-height-relative;
    }

    &__date {
        font-size: $font-size-sm;
        color: $color-palette-gray-700;
        line-height: $line-height-relative;
    }

    &__row {
        flex-direction: row;
        padding: 0;
    }

    &__row-item {
        display: flex;
        flex-direction: column;
        flex: 1;
        position: relative;
        padding: $spacing-1;
        min-height: $information-row-min-height;

        .sidebar-card__title {
            margin-bottom: $spacing-0;
        }

        &:not(:last-child)::after {
            content: "";
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            height: 50%;
            width: 1px;
            background-color: $color-palette-gray-200;
        }
    }
}

.sidebar-references {
    display: flex;
    width: 100%;
    min-height: $information-min-height;
}

:host ::ng-deep p-skeleton {
    min-height: $skeleton-min-height;
}
