@import "../new-variables";

.panel-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px 0 9%;
    border: 1px solid $border-color;
    width: 100%;
    height: 100%;
    min-height: 165px;
    .requests-counter {
        border-radius: 50%;
        display: flex;
        font-size: 1rem;
        position: absolute;
        content: "4";
        width: 15px;
        height: 15px;
        left: 20px;
        top:55px;
        background-color: #ee6969;
        color: white;
        justify-content: center;
        align-items: center;
    }
    .visible-content {
        display: flex;
        align-items: center;
        gap: 3.3rem;
        width: inherit;
        max-width: 90%;


        .panel-box--text-container {
            font-weight: $medium;
            width: inherit;
            overflow: hidden;
            .panel-box-title {
                margin: 0;
                color: $main-color;
                font-weight: $bold;
                font-size: $text-size-xl;
                letter-spacing: 0.4px;
            }

            .panel-box-description {
                margin: 0rem;
                color: $grey-text-color;
                font-size: $text-size-large;
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
                letter-spacing: 0.32px;
                font-weight: $extra-light;
                line-height: 35px;
            }
        }
    }

    .on-hover-img {
        display: none;
    }

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

    &:hover .on-hover-img {
        display: block;
    }
}