@import "../../style_config/config";

.circleIcon {
    border-radius:50%;
    background: none;
    border: none;
    outline: none;
    // width: $circle-icon-size;
    // height: $circle-icon-size;
    align-content: center;
    justify-content:center;
    display: inline-block;
    font-size:inherit;
    line-height: 100%;
    cursor:pointer;

    &-Wrap {
        display:flex;
        flex-direction: column;
        text-align:center;
    }
    &:hover {
        background-color: $hover-effect-dark;
        transition:0.3s;
    }
    &--white {
        color:white;
        &:hover{
            background-color: rgba(255,255,255,.16);
        }
    }
    &--greybg {
        background-color: $grey-level1;
    }

    &--border {
        border: 1px solid $grey-level1;
    }
    
    &--large {
        width: 2.5rem;
        height: 2.5rem;
    }
    &--noHover:hover {
        background-color:unset;
    }

    .JDicon__svg {
        line-height: 100%;
        top:.1em;
    }


    img {
        width: 100%;
    }
}