@use '~@epam/promo/assets/styles/colors.scss' as *;

.container {
    display: flex;

    .item {
        padding-left: 18px;
        padding-right: 18px;
        color: var(--white) !important;

        &:hover {
            background-color: $gray90;
        }

        :global(.uui-icon) {
            fill: var(--white);
        }

        :global(.uui-caption) {
            font-weight: lighter;
        }
    }

    .divider {
        position: relative;
        margin: 0;
        box-sizing: content-box;
        width: 1px;
        height: 24px;

        &::before {
            content: '';
            position: absolute;
            height: 100%;
            border-right: thin solid var(--icon-color);
        }
    }
}
