.IconButton {
    cursor: pointer;
    border-radius: 4px;
    height: 24px;
    width: 24px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 100ms ease-out 0s;
    color: rgba(var(--center-channel-color-rgb), 0.56);

    &:hover {
        color: rgba(var(--center-channel-color-rgb), 0.72);
        background-color: rgba(var(--center-channel-color-rgb), 0.08);
    }

    &:active {
        background-color: rgba(var(--button-bg-rgb), 0.08);
        color: rgba(var(--button-bg-rgb), 1);
    }

    &.style--inverted {
        color: rgba(var(--sidebar-text-rgb), 0.64);

        &:hover {
            color: rgba(var(--sidebar-text-rgb), 1);
            background-color: rgba(var(--sidebar-text-rgb), 0.08);
        }

        &:active {
            color: rgba(var(--sidebar-text-rgb), 1);
            background-color: rgba(var(--sidebar-text-rgb), 0.16);
        }
    }

    .Icon {
        height: 24px;
        width: 24px;
        padding: 0;
        margin: 0;
    }

    &.size--large {
        width: 48px;
        height: 48px;
        font-size: 31.2px;
    }

    &.size--medium {
        width: 40px;
        height: 40px;
        font-size: 24px;
    }

    &.size--small {
        width: 32px;
        height: 32px;
        font-size: 18px;
    }

    &.margin-left {
        margin-left: 5px;
    }
}
