@use "../../../../styles/abstracts/variables";
@use "../../../../styles/abstracts/mixins";  

.news__card {
    display: flex;
    flex: 0 0 320px;
    min-width: 320px;
    flex-direction: column;
    cursor: pointer;
    
    &__header {
        background: linear-gradient(to right, rgba(40,98,255, 0.99), rgba(34,96,255, 0.94)), url("/assets/images/waves.svg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        color: #FFF;
        text-align: center;
        padding: 3rem 2rem;
        border-top-left-radius: 6px;
        border-top-right-radius: 6px;

        h1{
            font-weight: 700;
            font-size: 1.2rem;
            color: variables.$col-white;
        }

        small {
            font-weight: 500;
            font-size: .75rem;
            opacity: .8;
        }
    }

    &__body {
        border-right: 2px solid variables.$col-primary;
        border-left: 2px solid variables.$col-primary;
        border-bottom: 2px solid variables.$col-primary;
        border-bottom-right-radius: 6px;
        border-bottom-left-radius: 6px;
        padding: 1.5rem 1.5rem;

        span {
            background: variables.$col-primary-btn;
            color: variables.$col-white;
            padding: .5rem .8rem;
            border-radius: 10px;
            font-size: .65rem;
            font-weight: 700;
        }

        h1{
            padding-top: 1.2rem;
            font-size: 1rem;
            color: variables.$col-secondary;
            font-weight: 700;
        }

        h3{
            color: variables.$col-secondary !important;
            padding-top: 1rem;
            font-size: .83rem !important;
            line-height: 1.85;
            opacity: .8;
            font-weight: 500;
        }

        h5{
            padding-top: 1rem;
            color: variables.$col-primary-btn;
            font-size: .9rem;
            font-weight: 600;
            display: flex;
            align-items: center;
        }

        &__buttons {
            margin-top: 1.2rem;
            display: flex;
            gap: 6px;
            align-items: center;
            border-top: 1px solid variables.$col-border-lining;

            &--edit {
                padding: .5rem .7rem;
                border-radius: 6px;
                cursor: pointer;
                background: variables.$col-success-bg;
                color: variables.$col-success-color;
                font-size: .8rem;
                font-weight: 500;
                margin-top: .7rem;
                display: flex;
                align-items: center;
            }

            &--read {
                @extend .news__card__body__buttons--edit;
                background: variables.$col-primary-btn;
                color: variables.$col-white;
            }

            &--delete {
                @extend .news__card__body__buttons--edit;
                background: variables.$col-danger-bg;
                color: variables.$col-danger-color;
            }
        }
    }
}