Proyectos de Subversion LeadersLinked - Antes de SPA

@use "../../settings/mixins.scss";

.knowledge-record-card {
    @include mixins.widget;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    height: 100%;

    &> {
        a {
            width: fit-content;

            img {
                width: 100%;
                height: auto;
            }

            h2 {
                color: $title-color;
                font-weight: 800;
            }
        }

        h3 {
            color: $subtitle-color;
            font-weight: 400;
        }

        p {
            color: $font-color;
            font-weight: 400;
            text-align: justify;
            text-justify: inter-word;
        }
    }

    .knowledge-record-card-actions {
        display: flex;
        align-items: center;
        gap: .5rem;

        &>* {
            flex: 1;
            max-width: calc(100% / 3);
        }
    }

    .reaction-btn {
        align-items: center;
        border-radius: 10px;
        display: inline-flex;
        gap: 0.5rem;
        justify-content: center;
        padding: 10px;
        position: relative;
        width: -webkit-fill-available;
        transition: background-color 200ms ease;

        &:hover {
            background-color: #f5f5f5;
        }
    }

    .reactions {
        position: absolute;
        bottom: calc(100% + 0.5rem);
        background-color: $bg-color;
        box-shadow: 0px 0px 3px #000;
        gap: 0.5rem;
        left: 50%;
        display: none;
        padding: 0.2rem;
        width: fit-content;
        border-radius: 20px;
        transform: translateX(-50%);

        &.active {
            display: flex;
        }
    }
}

.knowledge-record-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
}


.knowledge-category-list {
    @include mixins.widget;
    padding: 1rem;
    width: 100%;

    ul {
        display: flex;
        flex-direction: column;
        gap: .5rem;

        li {
            font-weight: 400;
            font-size: 16px;
            color: $font-color;
            padding: .5rem;
            border-radius: $border-radius;

            &.knowledge-category-li-selected {
                background-color: $bg-color-secondary;
            }
        }
    }
}

.input-group-btn .btn {
    height: -webkit-fill-available;

    &-file {
        display: flex;
        align-items: center;

        span {
            color: #fff;
        }
    }
}