@import "../styles/variables";
.main{
    display: flex;
    justify-content: center;
    height: 100%;
    align-items: center;
    max-width: 100%;
    &.heightAuto {
        height: auto;
    }
    &.noflex {
        flex: none;
    }
}

.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.clickable {
    :global{
        [class^="icon-"]:before, [class*=" icon-"]:before {
            cursor:pointer;
        }
    }
    cursor: pointer;
    // This makes the area around the icon also clickable
    &.expandClickArea{
        position: relative;
        & .expandClickAreaIcon:after {
            content: '';
            position: absolute;
            width: calc(100% + 20px);
            height: calc(100% + 20px);
            left: -10px;
            top: -10px;
            opacity: 0.5;
        }
    }

    &:hover{
        opacity: .6;
    }
}