@talentsoft-opensource/hylia/molecules/feedback.less

The Hylia design systems. Contains all the building blocks style rules for Talentsoft.

.feedback {
    display: flex;
    overflow: hidden;
    flex: 1;
    flex-direction: column;
    justify-content: space-between;

    border: 0.1rem solid @apprentice;
    border-radius: @radius;
    background-color: @stormtrooper;

    &--withoutBorder {
        border: none;
    }

    &--head {
        flex-direction: column;

        &:not(:last-child) {
            margin-bottom: 2rem;
        }
    }

    &__button-more {
        font-size: 2rem;

        cursor: pointer;

        color: @knight;

        &--padding {
            margin-left: 5.6rem;
        }
    }

    &__button-collapse {
        font-size: 1.6rem;

        position: relative;

        margin-left: 5.6rem;
        padding-right: 0;

        cursor: pointer;
    }

    &__time {
        width: 8rem;

        color: @knight;
    }

    &__text {
        padding-bottom: 2rem;
        padding-left: 8rem;
    }

    &__title, &__post {
        flex: 1;

        padding-right: 3rem;
    }

    &__label {
        flex: 1;

        padding-right: 3rem;
    }

    &__post {
        flex: 1;
    }

    &__content {
        position: relative;

        display: flex;
        align-items: center;
        flex: 1;
        flex-basis: auto;
        justify-content: space-between;

        min-height: 3.3rem;
        margin: 2rem 2.5rem;

        &--head {
            margin-bottom: 1.5rem;
            padding-bottom: 1.5rem;

            &:before {
                position: absolute;
                bottom: 0;
                left: 0;

                width: 100%;
                height: 0.1rem;

                content: "";

                background-color: @apprentice;
            }
        }
    }

    &__status {
        display: flex;
        align-items: center;
    }

    &__icon {
        font-size: 2.6rem;

        padding-right: 4.5rem;

        color: @vader;
    }

    &__tag {
        min-width: 13.5rem;
        height: 3rem;

        color: @stormtrooper;
    }
}

//Collapse Content

.feedback-collapse {
    overflow: hidden;

    height: 0;

    &__content {
        position: relative;

        display: flex;
        flex: 1;
        flex-basis: auto;

        padding: 2rem 2.5rem 5rem 2.5rem;

        background-color: @acolyte;
    }

    &__feeds {
        margin-left: 6rem;
    }
}

.feedback-collapse-button {
    position: absolute;
    right: -0.1rem;
    bottom: -0.7rem;

    display: flex;

    padding: 0.7rem 3rem 1.4rem 3rem;

    cursor: pointer;
    transition: all 0.3s;

    border: 0.1rem solid @apprentice;
    border-top-left-radius: @radius;
    background-color: @stormtrooper;

    &:hover {
        transform: translateY(-0.5rem);
    }

    &__icon {
        padding-left: 1.5rem;
    }
}