@use "../../00-base/colors/colors";
@use "../../00-base/mixin/core.mixin";

.hoo-buttonaction{
	display: inline-flex;

	height: core.px2rem(44px);
	margin: 0;
	padding: 0 core.px2rem(4px);

	white-space: nowrap;

	border: none;
	background-color: colors.$neutral-000;
    color: colors.$neutral-700;

	align-items: center;

    cursor: pointer;

    &:disabled{
        color: colors.$neutral-400;
    }

    .hoo-button-icon{
        line-height: core.px2rem(36px);
    
        display: flex;
        justify-content: center;
    
        width: core.px2rem(24px);
        height: core.px2rem(24px);
    
        color: colors.$theme-600;
    
        align-items: center;
    
    }
    
    .hoo-button-label{
        font-size: core.px2rem(14px);
        line-height: core.px2rem(36px);
    
        box-sizing: border-box;
        padding: 0 core.px2rem(4px);
    
        white-space: nowrap;
        font-weight: 400;
    }
    
    &[disabled],
	&:disabled {
		pointer-events: none;

		color: colors.$neutral-400;
		border-color: colors.$neutral-100;
		background-color: colors.$neutral-100;
        .hoo-button-icon{
            color: colors.$neutral-400;
        }
	}

	&:hover{
		color: colors.$theme-900;
	}

	&:active{
		color: inherit;
		.hoo-buttonaction-icon{
			// color: $CommandLinksPressed;
			color: colors.$theme-900;
		}
	}
}