dot-toolbar-announcements.component.scss

@use "variables" as *;

:host {
    max-height: 100vh;
    overflow: auto;
    display: block;
    padding: $spacing-4;
    width: 26rem;
}

.announcements__list {
    list-style: none;
    padding: 0;
}

.announcements__container {
    display: flex;
    justify-content: flex-end;

    i {
        color: $color-palette-primary-500;
    }
}

.announcements__list-item {
    display: flex;
    position: relative;
    flex-direction: row;
    gap: $spacing-3;
    padding: $spacing-2 $spacing-1;
    margin-bottom: $spacing-1;
    border-radius: $border-radius-md;
    &:hover {
        background-color: $color-palette-primary-100;
    }
}

.announcements__list-item--active {
    background-color: $color-palette-secondary-100;
}

.announcements__title {
    margin: 0;
    padding-bottom: $spacing-1;
    border-bottom: 1px solid $color-palette-gray-300;
    font-size: $font-size-lg;
}

.announcements__content {
    display: flex;
    flex-direction: column;
    gap: $spacing-0;
}

.announcements__date {
    color: $color-palette-gray-800;
    font-size: $font-size-sm;
}

.announcements__image {
    height: 2.7rem;
    width: 2.7rem;
    background-color: var(--color-palette-secondary-200);
    color: var(--color-palette-secondary-500);
    border-radius: 50%;
    font-size: $font-size-lg;
}

.announcements__label {
    font-weight: $font-weight-semi-bold;
}

.announcements__about {
    display: grid;
    flex-direction: column;
    gap: $spacing-3;
    margin: $spacing-3;
    grid-template-columns: 1fr 1fr;
}

.announcements__link {
    color: $color-palette-primary;
    padding: $spacing-1;
    border-radius: $border-radius-lg;
    &:hover {
        background-color: $color-palette-primary-100;
    }
}

.announcements__url {
    text-decoration: none;
    color: $black;
}

.announcements__badge {
    background-color: $color-accessible-text-fuchsia;
    border-radius: 50%;
    color: $white;
    font-size: $font-size-sm;
    line-height: $font-size-sm;
    width: 0.625rem;
    height: 0.625rem;
    position: absolute;
    left: 39px;
    top: 14px;
}

::ng-deep {
    .toolbar-announcements__container {
        &.p-overlaypanel {
            .p-overlaypanel-content {
                padding: 0;
            }
        }
    }
}