@use "utils/functions";

.channel-header__icon {
    position: relative;
    z-index: 5;
    display: flex;
    min-width: 32px;
    height: 32px;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: 4px;
    margin: 0 0 0 4px;
    background: transparent;
    color: rgba(var(--center-channel-color-rgb), 0.64);
    cursor: pointer;
    fill: rgba(var(--center-channel-color-rgb), 0.64);
    text-align: center;

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

    .icon {
        font-size: 16px;

        svg {
            width: 16px;
            height: 16px;
        }
    }

    .icon.icon__flag {
        svg {
            width: 18px;
            height: 18px;
        }
    }

    &:active,
    &--active,
    &--active.btn.btn-icon,
    &--active:hover {
        background: rgba(var(--button-bg-rgb), 0.08);
        color: functions.v(button-bg);
        fill: functions.v(button-bg);

        .icon__text {
            color: functions.v(button-bg);
        }

        .icon {
            color: functions.v(button-bg);
        }
    }

    &--active-inverted,
    &--active-inverted:hover {
        background: functions.v(button-bg);
        color: functions.v(button-color);
        fill: functions.v(button-color);
    }

    .icon__text {
        font-weight: 600;
    }

    .icon__search {
        top: 1px;
    }
}

.channel-header__info .channel-header__icons .channel-header__icon--wide {
    width: auto;
    min-width: unset;
    padding: 0 6px;
}

.channel-header__icon--left {
    height: unset;
    padding: 4px;
    margin: 0;

    .icon {
        width: 16px;
        height: 16px;
    }

    svg {
        width: 12px;
        height: 12px;
    }
}

.userGuideHelp {
    display: inline-table;
}
