@import "../abstracts/variables";
@import "../abstracts/mixins";

/* Graph Item Css */

.graph__item {
    border: 1px solid var(--hex-border-color);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    border-radius: 10px;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    &::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 0%;
        background-color: var(--hex-main-color-one);
        z-index: 0;
        visibility: hidden;
        opacity: 0;
        transition: all .4s;
    }
    &.selected {
        &::before {
            visibility: visible;
            opacity: 1;
            width: 100%;
        }
        svg,
        img {
            filter: brightness(100);
        }
    }
    img,
    svg {
        path {
            fill: var(--hex-white-text);
        }
    }
}

.graphWrap {
    visibility: hidden;
    opacity: 0;
    transition: all .3s;
    height: 0;
    &.show {
        visibility: visible;
        opacity: 1;
        height: auto;
        margin-top: 20px;
    }
    .graph__item {
        padding: 10px;
    }
}