@mixin icon-override($icon) {
	&:before {
		content: $icon;
	}
}

@mixin focused() {
	outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: $focusShadow;
}

@mixin focused-inset() {
	outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: inset $focusShadow;
}

@mixin focused-input() {
	@include focused();
	border-color: $inputFocusBorderColor;
}

@mixin focused-listitem() {
	outline: $focusOutline;
    outline-offset: $focusOutlineOffset;
    box-shadow: $inputListItemFocusShadow;
}

@mixin invalid-input() {
	border-color: $inputErrorBorderColor;
}

@mixin menuitem {
    .p-menuitem-link {
        padding: $menuitemPadding;
        color: $menuitemTextColor;
        border-radius: $menuitemBorderRadius;
        transition: $listItemTransition;
        user-select: none;

        .p-menuitem-text {
            color: $menuitemTextColor;
        }

        .p-menuitem-icon {
            color: $menuitemIconColor;
            margin-right: $inlineSpacing;
        }

        .p-submenu-icon {
            color: $menuitemIconColor;
        }

        &:not(.p-disabled):hover {
            background: $menuitemActiveBg;

            .p-menuitem-text {
                color: $menuitemTextActiveColor;
            }
            .p-menuitem-icon {
                color: $menuitemIconActiveColor;
            }
            .p-submenu-icon {
                color: $menuitemIconActiveColor;
            }
        }
        &:focus {
            @include focused-listitem();
        }
    }
}

@mixin horizontal-rootmenuitem {
    > .p-menuitem-link {
        padding: $horizontalMenuRootMenuitemPadding;
        color: $horizontalMenuRootMenuitemTextColor;
        border-radius: $horizontalMenuRootMenuitemBorderRadius;
        transition: $listItemTransition;
        user-select: none;

        .p-menuitem-text {
            color: $horizontalMenuRootMenuitemTextColor;
        }

        .p-menuitem-icon {
            color: $horizontalMenuRootMenuitemIconColor;
            margin-right: $inlineSpacing;
        }

        .p-submenu-icon {
            color: $horizontalMenuRootMenuitemIconColor;
            margin-left: $inlineSpacing;
        }

        &:not(.p-disabled):hover {
            background: $horizontalMenuRootMenuitemHoverBg;

            .p-menuitem-text {
                color: $horizontalMenuRootMenuitemTextHoverColor;
            }
            .p-menuitem-icon {
                color: $horizontalMenuRootMenuitemIconHoverColor;
            }
            .p-submenu-icon {
                color: $horizontalMenuRootMenuitemIconHoverColor;
            }
        }
        &:focus {
            @include focused-listitem();
        }
    }

    &.p-menuitem-active > {
        .p-menuitem-link,
        .p-menuitem-link:not(.p-disabled):hover {
            background: $horizontalMenuRootMenuitemHoverBg;
        }
        .p-menuitem-link .p-menuitem-text,
        .p-menuitem-link:not(.p-disabled):hover .p-menuitem-text {
            color: $horizontalMenuRootMenuitemTextHoverColor;
        }
        .p-menuitem-link .p-menuitem-icon,
        .p-menuitem-link:not(.p-disabled):hover .p-menuitem-icon {
            color: $horizontalMenuRootMenuitemIconHoverColor;
        }
        .p-menuitem-link .p-submenu-icon,
        .p-menuitem-link:not(.p-disabled):hover .p-submenu-icon {
            color: $horizontalMenuRootMenuitemIconHoverColor;
        }
    }
}

@mixin placeholder {
	::-webkit-input-placeholder {
		@content
	}
	:-moz-placeholder {
		@content
	}
	::-moz-placeholder {
		@content
	}
	:-ms-input-placeholder {
		@content
	}
}

@mixin scaledPadding($val, $scale) {
    padding: nth($val, 1) * $scale nth($val, 2) * $scale;
}

@mixin scaledFontSize($val, $scale) {
    font-size: $val * $scale;
}

@mixin nested-submenu-indents($val, $index, $length) {
    ul {
        li {
            a {
                padding-left: $val * ($index + 1);
            }
            @if $index < $length {
                @include nested-submenu-indents($val, $index + 2, $length);
            }
        }
    }
}

@mixin action-icon($enabled: true) {
    width: $actionIconWidth;
    height: $actionIconHeight;
    color: $actionIconColor;
    border: $actionIconBorder;
    background: $actionIconBg;
    border-radius: $actionIconBorderRadius;
    transition: $actionIconTransition;

    @if $enabled {
        &:enabled:hover {
            @include action-icon-hover();
        }
    } @else {
        &:hover {
            @include action-icon-hover();
        }
    }

    &:focus {
        @include focused();
    }
}

@mixin action-icon-hover() {
    color: $actionIconHoverColor;
    border-color: $actionIconHoverBorderColor;
    background: $actionIconHoverBg;
}

@mixin button-states {
    // <button> and <a> tags support :enabled selector.

    &:enabled,
    &:not(button):not(a):not(.p-disabled) {
        @content;
    }
}

@function tint($color, $percentage) {
    @return mix(#fff, $color, $percentage);
}

@function shade($color, $percentage) {
    @return mix(#000, $color, $percentage);
}
