ak-button.css

:host {
    --button--PaddingTop: var(--pf-v5-c-button--PaddingTop, 0.375rem);
    --button--PaddingRight: var(--pf-v5-c-button--PaddingRight, 1rem);
    --button--PaddingBottom: var(--pf-v5-c-button--PaddingBottom, 0.375rem);
    --button--PaddingLeft: var(--pf-v5-c-button--PaddingLeft, 1rem);
    --button--LineHeight: var(--pf-v5-c-button--LineHeight, 1.5);
    --button--FontWeight: var(--pf-v5-c-button--FontWeight, 400);
    --button--FontSize: var(--pf-v5-c-button--FontSize, 1rem);
    --button--BackgroundColor: var(--pf-v5-c-button--BackgroundColor, transparent);
    --button--BorderRadius: var(--pf-v5-c-button--BorderRadius, 3px);
    --button--after--BorderRadius: var(--pf-v5-c-button--after--BorderRadius, 3px);
    --button--after--BorderColor: var(--pf-v5-c-button--after--BorderColor, transparent);
    --button--after--BorderWidth: var(--pf-v5-c-button--after--BorderWidth, 1px);
    --button--hover--after--BorderWidth: var(--pf-v5-c-button--hover--after--BorderWidth, 2px);
    --button--focus--after--BorderWidth: var(--pf-v5-c-button--focus--after--BorderWidth, 2px);
    --button--active--after--BorderWidth: var(--pf-v5-c-button--active--after--BorderWidth, 2px);
    --button--disabled--Color: var(--pf-v5-c-button--disabled--Color, #6a6e73);
    --button--disabled--BackgroundColor: var(--pf-v5-c-button--disabled--BackgroundColor, #d2d2d2);
    --button--disabled--after--BorderColor: var(
        --pf-v5-c-button--disabled--after--BorderColor,
        transparent
    );
    --button--m-primary--BackgroundColor: var(--pf-v5-c-button--m-primary--BackgroundColor, #06c);
    --button--m-primary--Color: var(--pf-v5-c-button--m-primary--Color, #fff);
    --button--m-primary--hover--BackgroundColor: var(
        --pf-v5-c-button--m-primary--hover--BackgroundColor,
        #004080
    );
    --button--m-primary--hover--Color: var(--pf-v5-c-button--m-primary--hover--Color, #fff);
    --button--m-primary--focus--BackgroundColor: var(
        --pf-v5-c-button--m-primary--focus--BackgroundColor,
        #004080
    );
    --button--m-primary--focus--Color: var(--pf-v5-c-button--m-primary--focus--Color, #fff);
    --button--m-primary--active--BackgroundColor: var(
        --pf-v5-c-button--m-primary--active--BackgroundColor,
        #004080
    );
    --button--m-primary--active--Color: var(--pf-v5-c-button--m-primary--active--Color, #fff);
    --button--m-secondary--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--BackgroundColor,
        transparent
    );
    --button--m-secondary--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--after--BorderColor,
        #06c
    );
    --button--m-secondary--Color: var(--pf-v5-c-button--m-secondary--Color, #06c);
    --button--m-secondary--hover--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--hover--BackgroundColor,
        transparent
    );
    --button--m-secondary--hover--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--hover--after--BorderColor,
        #06c
    );
    --button--m-secondary--hover--Color: var(--pf-v5-c-button--m-secondary--hover--Color, #06c);
    --button--m-secondary--focus--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--focus--BackgroundColor,
        transparent
    );
    --button--m-secondary--focus--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--focus--after--BorderColor,
        #06c
    );
    --button--m-secondary--focus--Color: var(--pf-v5-c-button--m-secondary--focus--Color, #06c);
    --button--m-secondary--active--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--active--BackgroundColor,
        transparent
    );
    --button--m-secondary--active--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--active--after--BorderColor,
        #06c
    );
    --button--m-secondary--active--Color: var(--pf-v5-c-button--m-secondary--active--Color, #06c);
    --button--m-secondary--m-danger--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--m-danger--BackgroundColor,
        transparent
    );
    --button--m-secondary--m-danger--Color: var(
        --pf-v5-c-button--m-secondary--m-danger--Color,
        #c9190b
    );
    --button--m-secondary--m-danger--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--m-danger--after--BorderColor,
        #c9190b
    );
    --button--m-secondary--m-danger--hover--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--m-danger--hover--BackgroundColor,
        transparent
    );
    --button--m-secondary--m-danger--hover--Color: var(
        --pf-v5-c-button--m-secondary--m-danger--hover--Color,
        #a30000
    );
    --button--m-secondary--m-danger--hover--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--m-danger--hover--after--BorderColor,
        #c9190b
    );
    --button--m-secondary--m-danger--focus--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--m-danger--focus--BackgroundColor,
        transparent
    );
    --button--m-secondary--m-danger--focus--Color: var(
        --pf-v5-c-button--m-secondary--m-danger--focus--Color,
        #a30000
    );
    --button--m-secondary--m-danger--focus--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--m-danger--focus--after--BorderColor,
        #c9190b
    );
    --button--m-secondary--m-danger--active--BackgroundColor: var(
        --pf-v5-c-button--m-secondary--m-danger--active--BackgroundColor,
        transparent
    );
    --button--m-secondary--m-danger--active--Color: var(
        --pf-v5-c-button--m-secondary--m-danger--active--Color,
        #a30000
    );
    --button--m-secondary--m-danger--active--after--BorderColor: var(
        --pf-v5-c-button--m-secondary--m-danger--active--after--BorderColor,
        #c9190b
    );
    --button--m-tertiary--BackgroundColor: var(
        --pf-v5-c-button--m-tertiary--BackgroundColor,
        transparent
    );
    --button--m-tertiary--after--BorderColor: var(
        --pf-v5-c-button--m-tertiary--after--BorderColor,
        #151515
    );
    --button--m-tertiary--Color: var(--pf-v5-c-button--m-tertiary--Color, #151515);
    --button--m-tertiary--hover--BackgroundColor: var(
        --pf-v5-c-button--m-tertiary--hover--BackgroundColor,
        transparent
    );
    --button--m-tertiary--hover--after--BorderColor: var(
        --pf-v5-c-button--m-tertiary--hover--after--BorderColor,
        #151515
    );
    --button--m-tertiary--hover--Color: var(--pf-v5-c-button--m-tertiary--hover--Color, #151515);
    --button--m-tertiary--focus--BackgroundColor: var(
        --pf-v5-c-button--m-tertiary--focus--BackgroundColor,
        transparent
    );
    --button--m-tertiary--focus--after--BorderColor: var(
        --pf-v5-c-button--m-tertiary--focus--after--BorderColor,
        #151515
    );
    --button--m-tertiary--focus--Color: var(--pf-v5-c-button--m-tertiary--focus--Color, #151515);
    --button--m-tertiary--active--BackgroundColor: var(
        --pf-v5-c-button--m-tertiary--active--BackgroundColor,
        transparent
    );
    --button--m-tertiary--active--after--BorderColor: var(
        --pf-v5-c-button--m-tertiary--active--after--BorderColor,
        #151515
    );
    --button--m-tertiary--active--Color: var(--pf-v5-c-button--m-tertiary--active--Color, #151515);
    --button--m-warning--BackgroundColor: var(
        --pf-v5-c-button--m-warning--BackgroundColor,
        #f0ab00
    );
    --button--m-warning--Color: var(--pf-v5-c-button--m-warning--Color, #151515);
    --button--m-warning--hover--BackgroundColor: var(
        --pf-v5-c-button--m-warning--hover--BackgroundColor,
        #c58c00
    );
    --button--m-warning--hover--Color: var(--pf-v5-c-button--m-warning--hover--Color, #151515);
    --button--m-warning--focus--BackgroundColor: var(
        --pf-v5-c-button--m-warning--focus--BackgroundColor,
        #c58c00
    );
    --button--m-warning--focus--Color: var(--pf-v5-c-button--m-warning--focus--Color, #151515);
    --button--m-warning--active--BackgroundColor: var(
        --pf-v5-c-button--m-warning--active--BackgroundColor,
        #c58c00
    );
    --button--m-warning--active--Color: var(--pf-v5-c-button--m-warning--active--Color, #151515);
    --button--m-danger--BackgroundColor: var(--pf-v5-c-button--m-danger--BackgroundColor, #c9190b);
    --button--m-danger--Color: var(--pf-v5-c-button--m-danger--Color, #fff);
    --button--m-danger--hover--BackgroundColor: var(
        --pf-v5-c-button--m-danger--hover--BackgroundColor,
        #a30000
    );
    --button--m-danger--hover--Color: var(--pf-v5-c-button--m-danger--hover--Color, #fff);
    --button--m-danger--focus--BackgroundColor: var(
        --pf-v5-c-button--m-danger--focus--BackgroundColor,
        #a30000
    );
    --button--m-danger--focus--Color: var(--pf-v5-c-button--m-danger--focus--Color, #fff);
    --button--m-danger--active--BackgroundColor: var(
        --pf-v5-c-button--m-danger--active--BackgroundColor,
        #a30000
    );
    --button--m-danger--active--Color: var(--pf-v5-c-button--m-danger--active--Color, #fff);
    --button--m-link--BackgroundColor: var(--pf-v5-c-button--m-link--BackgroundColor, transparent);
    --button--m-link--Color: var(--pf-v5-c-button--m-link--Color, #06c);
    --button--m-link--hover--BackgroundColor: var(
        --pf-v5-c-button--m-link--hover--BackgroundColor,
        transparent
    );
    --button--m-link--hover--Color: var(--pf-v5-c-button--m-link--hover--Color, #004080);
    --button--m-link--focus--BackgroundColor: var(
        --pf-v5-c-button--m-link--focus--BackgroundColor,
        transparent
    );
    --button--m-link--focus--Color: var(--pf-v5-c-button--m-link--focus--Color, #004080);
    --button--m-link--active--BackgroundColor: var(
        --pf-v5-c-button--m-link--active--BackgroundColor,
        transparent
    );
    --button--m-link--active--Color: var(--pf-v5-c-button--m-link--active--Color, #004080);
    --button--m-link--disabled--BackgroundColor: var(
        --pf-v5-c-button--m-link--disabled--BackgroundColor,
        transparent
    );
    --button--m-link--disabled--Color: var(--pf-v5-c-button--m-link--disabled--Color, #6a6e73);
    --button--m-link--m-inline--FontSize: var(
        --pf-v5-c-button--m-link--m-inline--FontSize,
        inherit
    );
    --button--m-link--m-inline--hover--TextDecoration: var(
        --pf-v5-c-button--m-link--m-inline--hover--TextDecoration,
        underline
    );
    --button--m-link--m-inline--hover--Color: var(
        --pf-v5-c-button--m-link--m-inline--hover--Color,
        #004080
    );
    --button--m-link--m-inline--PaddingTop: var(--pf-v5-c-button--m-link--m-inline--PaddingTop, 0);
    --button--m-link--m-inline--PaddingRight: var(
        --pf-v5-c-button--m-link--m-inline--PaddingRight,
        0
    );
    --button--m-link--m-inline--PaddingBottom: var(
        --pf-v5-c-button--m-link--m-inline--PaddingBottom,
        0
    );
    --button--m-link--m-inline--PaddingLeft: var(
        --pf-v5-c-button--m-link--m-inline--PaddingLeft,
        0
    );
    --button--m-link--m-inline__progress--Left: var(
        --pf-v5-c-button--m-link--m-inline__progress--Left,
        0.25rem
    );
    --button--m-link--m-inline--m-in-progress--PaddingLeft: var(
        --pf-v5-c-button--m-link--m-inline--m-in-progress--PaddingLeft,
        calc(0.25rem + 1rem + 0.5rem)
    );
    --button--m-link--m-danger--BackgroundColor: var(
        --pf-v5-c-button--m-link--m-danger--BackgroundColor,
        transparent
    );
    --button--m-link--m-danger--Color: var(--pf-v5-c-button--m-link--m-danger--Color, #c9190b);
    --button--m-link--m-danger--hover--BackgroundColor: var(
        --pf-v5-c-button--m-link--m-danger--hover--BackgroundColor,
        transparent
    );
    --button--m-link--m-danger--hover--Color: var(
        --pf-v5-c-button--m-link--m-danger--hover--Color,
        #a30000
    );
    --button--m-link--m-danger--focus--BackgroundColor: var(
        --pf-v5-c-button--m-link--m-danger--focus--BackgroundColor,
        transparent
    );
    --button--m-link--m-danger--focus--Color: var(
        --pf-v5-c-button--m-link--m-danger--focus--Color,
        #a30000
    );
    --button--m-link--m-danger--active--BackgroundColor: var(
        --pf-v5-c-button--m-link--m-danger--active--BackgroundColor,
        transparent
    );
    --button--m-link--m-danger--active--Color: var(
        --pf-v5-c-button--m-link--m-danger--active--Color,
        #a30000
    );
    --button--m-plain--BackgroundColor: var(
        --pf-v5-c-button--m-plain--BackgroundColor,
        transparent
    );
    --button--m-plain--Color: var(--pf-v5-c-button--m-plain--Color, #6a6e73);
    --button--m-plain--hover--BackgroundColor: var(
        --pf-v5-c-button--m-plain--hover--BackgroundColor,
        transparent
    );
    --button--m-plain--hover--Color: var(--pf-v5-c-button--m-plain--hover--Color, #151515);
    --button--m-plain--focus--BackgroundColor: var(
        --pf-v5-c-button--m-plain--focus--BackgroundColor,
        transparent
    );
    --button--m-plain--focus--Color: var(--pf-v5-c-button--m-plain--focus--Color, #151515);
    --button--m-plain--active--BackgroundColor: var(
        --pf-v5-c-button--m-plain--active--BackgroundColor,
        transparent
    );
    --button--m-plain--active--Color: var(--pf-v5-c-button--m-plain--active--Color, #151515);
    --button--m-plain--disabled--Color: var(--pf-v5-c-button--m-plain--disabled--Color, #d2d2d2);
    --button--m-plain--disabled--BackgroundColor: var(
        --pf-v5-c-button--m-plain--disabled--BackgroundColor,
        transparent
    );
    --button--m-control--BackgroundColor: var(--pf-v5-c-button--m-control--BackgroundColor, #fff);
    --button--m-control--Color: var(--pf-v5-c-button--m-control--Color, #151515);
    --button--m-control--BorderRadius: var(--pf-v5-c-button--m-control--BorderRadius, 0);
    --button--m-control--after--BorderWidth: var(
        --pf-v5-c-button--m-control--after--BorderWidth,
        1px
    );
    --button--m-control--after--BorderTopColor: var(
        --pf-v5-c-button--m-control--after--BorderTopColor,
        #f0f0f0
    );
    --button--m-control--after--BorderRightColor: var(
        --pf-v5-c-button--m-control--after--BorderRightColor,
        #f0f0f0
    );
    --button--m-control--after--BorderBottomColor: var(
        --pf-v5-c-button--m-control--after--BorderBottomColor,
        #8a8d90
    );
    --button--m-control--after--BorderLeftColor: var(
        --pf-v5-c-button--m-control--after--BorderLeftColor,
        #f0f0f0
    );
    --button--m-control--disabled--BackgroundColor: var(
        --pf-v5-c-button--m-control--disabled--BackgroundColor,
        #f0f0f0
    );
    --button--m-control--hover--BackgroundColor: var(
        --pf-v5-c-button--m-control--hover--BackgroundColor,
        #fff
    );
    --button--m-control--hover--Color: var(--pf-v5-c-button--m-control--hover--Color, #151515);
    --button--m-control--hover--after--BorderBottomWidth: var(
        --pf-v5-c-button--m-control--hover--after--BorderBottomWidth,
        2px
    );
    --button--m-control--hover--after--BorderBottomColor: var(
        --pf-v5-c-button--m-control--hover--after--BorderBottomColor,
        #06c
    );
    --button--m-control--active--BackgroundColor: var(
        --pf-v5-c-button--m-control--active--BackgroundColor,
        #fff
    );
    --button--m-control--active--Color: var(--pf-v5-c-button--m-control--active--Color, #151515);
    --button--m-control--active--after--BorderBottomWidth: var(
        --pf-v5-c-button--m-control--active--after--BorderBottomWidth,
        2px
    );
    --button--m-control--active--after--BorderBottomColor: var(
        --pf-v5-c-button--m-control--active--after--BorderBottomColor,
        #06c
    );
    --button--m-control--focus--BackgroundColor: var(
        --pf-v5-c-button--m-control--focus--BackgroundColor,
        #fff
    );
    --button--m-control--focus--Color: var(--pf-v5-c-button--m-control--focus--Color, #151515);
    --button--m-control--focus--after--BorderBottomWidth: var(
        --pf-v5-c-button--m-control--focus--after--BorderBottomWidth,
        2px
    );
    --button--m-control--focus--after--BorderBottomColor: var(
        --pf-v5-c-button--m-control--focus--after--BorderBottomColor,
        #06c
    );
    --button--m-control--m-expanded--BackgroundColor: var(
        --pf-v5-c-button--m-control--m-expanded--BackgroundColor,
        #fff
    );
    --button--m-control--m-expanded--Color: var(
        --pf-v5-c-button--m-control--m-expanded--Color,
        #151515
    );
    --button--m-control--m-expanded--after--BorderBottomWidth: var(
        --pf-v5-c-button--m-control--m-expanded--after--BorderBottomWidth,
        2px
    );
    --button--m-control--m-expanded--after--BorderBottomColor: var(
        --pf-v5-c-button--m-control--m-expanded--after--BorderBottomColor,
        #06c
    );
    --button--m-small--FontSize: var(--pf-v5-c-button--m-small--FontSize, 0.875rem);
    --button--m-display-lg--PaddingTop: var(--pf-v5-c-button--m-display-lg--PaddingTop, 1rem);
    --button--m-display-lg--PaddingRight: var(--pf-v5-c-button--m-display-lg--PaddingRight, 2rem);
    --button--m-display-lg--PaddingBottom: var(--pf-v5-c-button--m-display-lg--PaddingBottom, 1rem);
    --button--m-display-lg--PaddingLeft: var(--pf-v5-c-button--m-display-lg--PaddingLeft, 2rem);
    --button--m-display-lg--FontWeight: var(--pf-v5-c-button--m-display-lg--FontWeight, 700);
    --button--m-link--m-display-lg--FontSize: var(
        --pf-v5-c-button--m-link--m-display-lg--FontSize,
        1.125rem
    );
    --button__icon--m-start--MarginRight: var(
        --pf-v5-c-button__icon--m-start--MarginRight,
        0.25rem
    );
    --button__icon--m-end--MarginLeft: var(--pf-v5-c-button__icon--m-end--MarginLeft, 0.25rem);
    --button__progress--width: var(--pf-v5-c-button__progress--width, calc(1rem + 0.5rem));
    --button__progress--Opacity: var(--pf-v5-c-button__progress--Opacity, 0);
    --button__progress--TranslateY: var(--pf-v5-c-button__progress--TranslateY, -50%);
    --button__progress--TranslateX: var(--pf-v5-c-button__progress--TranslateX, 0);
    --button__progress--Top: var(--pf-v5-c-button__progress--Top, 50%);
    --button__progress--Left: var(--pf-v5-c-button__progress--Left, 1rem);
    --button--m-progress--TransitionProperty: var(
        --pf-v5-c-button--m-progress--TransitionProperty,
        padding
    );
    --button--m-progress--TransitionDuration: var(
        --pf-v5-c-button--m-progress--TransitionDuration,
        250ms
    );
    --button--m-progress--PaddingRight: var(
        --pf-v5-c-button--m-progress--PaddingRight,
        calc(1rem + calc(1rem + 0.5rem) / 2)
    );
    --button--m-progress--PaddingLeft: var(
        --pf-v5-c-button--m-progress--PaddingLeft,
        calc(1rem + calc(1rem + 0.5rem) / 2)
    );
    --button--m-in-progress--PaddingRight: var(--pf-v5-c-button--m-in-progress--PaddingRight, 1rem);
    --button--m-in-progress--PaddingLeft: var(
        --pf-v5-c-button--m-in-progress--PaddingLeft,
        calc(1rem + calc(1rem + 0.5rem))
    );
    --button--m-in-progress--m-plain--Color: var(
        --pf-v5-c-button--m-in-progress--m-plain--Color,
        #06c
    );
    --button--m-in-progress--m-plain__progress--Left: var(
        --pf-v5-c-button--m-in-progress--m-plain__progress--Left,
        50%
    );
    --button--m-in-progress--m-plain__progress--TranslateX: var(
        --pf-v5-c-button--m-in-progress--m-plain__progress--TranslateX,
        -50%
    );
    --button__count--MarginLeft: var(--pf-v5-c-button__count--MarginLeft, 0.5rem);
    --button--disabled__c-badge--Color: var(--pf-v5-c-button--disabled__c-badge--Color, #151515);
    --button--disabled__c-badge--BackgroundColor: var(
        --pf-v5-c-button--disabled__c-badge--BackgroundColor,
        #f0f0f0
    );
    --button--m-primary__c-badge--BorderColor: var(
        --pf-v5-c-button--m-primary__c-badge--BorderColor,
        #f0f0f0
    );
    --button--m-primary__c-badge--BorderWidth: var(
        --pf-v5-c-button--m-primary__c-badge--BorderWidth,
        1px
    );

    position: relative;
    display: inline-block;

    --button-_FontFamily--fallback: redhattext, helvetica, arial, sans-serif;
    --button--FontFamily: var(--pf-v5-c-button--FontFamily, var(--button-_FontFamily--fallback));
    --button--m-narrow--PaddingTop: var(--pf-v5-c-button--m-narrow--PaddingTop, 0.375rem);
    --button--m-narrow--PaddingRight: var(--pf-v5-c-button--m-narrow--PaddingRight, 0.5);
    --button--m-narrow--PaddingBottom: var(--pf-v5-c-button--m-narrow--PaddingBottom, 0.375rem);
    --button--m-narrow--PaddingLeft: var(--pf-v5-c-button--m-narrow--PaddingLeft, 0.5);
}

[part="button"] {
    padding-block-start: var(--button--PaddingTop);
    padding-block-end: var(--button--PaddingBottom);
    padding-inline-start: var(--button--PaddingLeft);
    padding-inline-end: var(--button--PaddingRight);
    font-size: var(--button--FontSize);
    font-weight: var(--button--FontWeight);
    line-height: var(--button--LineHeight);
    text-align: center;
    white-space: nowrap;
    user-select: none;
    border: 0;
    border-radius: var(--button--BorderRadius);
    position: relative;
    font-family: var(--button--FontFamily);
}

[part="button"]::after {
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    pointer-events: none;
    content: "";
    border: var(--button--after--BorderWidth) solid;
    border-color: var(--button--after--BorderColor);
    border-radius: var(--button--after--BorderRadius);
}

[part="anchor"] {
    padding-block-start: var(--button--PaddingTop);
    padding-block-end: var(--button--PaddingBottom);
    padding-inline-start: var(--button--PaddingLeft);
    padding-inline-end: var(--button--PaddingRight);
    font-size: var(--button--FontSize);
    font-weight: var(--button--FontWeight);
    line-height: var(--button--LineHeight);
    text-align: center;
    white-space: nowrap;
    user-select: none;
    border: 0;
    border-radius: var(--button--BorderRadius);
}

[part="anchor"]::after {
    position: absolute;
    inset-block-start: 0;
    inset-block-end: 0;
    inset-inline-start: 0;
    inset-inline-end: 0;
    pointer-events: none;
    content: "";
    border: var(--button--after--BorderWidth) solid;
    border-color: var(--button--after--BorderColor);
    border-radius: var(--button--after--BorderRadius);
}

:host(:hover) {
    --button--after--BorderWidth: var(--button--hover--after--BorderWidth);

    text-decoration: none;
}

:host(:focus) {
    --button--after--BorderWidth: var(--button--focus--after--BorderWidth);
}

:host(:active) {
    --button--after--BorderWidth: var(--button--active--after--BorderWidth);
}

:host([block]) {
    display: block;
    width: 100%;
}

:host([small]) {
    --button--FontSize: var(--button--m-small--FontSize);
}

:host([size="sm"]) {
    --button--FontSize: var(--button--m-small--FontSize);
}

:host([narrow]) {
    --button--PaddingTop: var(--button--m-narrow--PaddingTop);
    --button--PaddingRight: var(--button--m-narrow--PaddingRight);
    --button--PaddingBottom: var(--button--m-narrow--PaddingBottom);
    --button--PaddingLeft: var(--button--m-narrow--PaddingLeft);
}

:host([size="lg"]) {
    --button--PaddingTop: var(--button--m-display-lg--PaddingTop);
    --button--PaddingRight: var(--button--m-display-lg--PaddingRight);
    --button--PaddingBottom: var(--button--m-display-lg--PaddingBottom);
    --button--PaddingLeft: var(--button--m-display-lg--PaddingLeft);
    --button--FontWeight: var(--button--m-display-lg--FontWeight);
    --button--FontSize: var(--button--m-link--m-display-lg--FontSize);
}

:host([variant="primary"]) #main {
    color: var(--button--m-primary--Color);
    background-color: var(--button--m-primary--BackgroundColor);
}

:host([variant="secondary"]) #main {
    --button--after--BorderColor: var(--button--m-secondary--after--BorderColor);

    color: var(--button--m-secondary--Color);
    background-color: var(--button--m-secondary--BackgroundColor);
}

:host([variant="tertiary"]) #main {
    --button--after--BorderColor: var(--button--m-tertiary--after--BorderColor);

    color: var(--button--m-tertiary--Color);
    background-color: var(--button--m-tertiary--BackgroundColor);
}

:host([variant="link"]) #main {
    --button--disabled--BackgroundColor: var(--button--m-link--disabled--BackgroundColor);
    --button--disabled--Color: var(--button--m-link--disabled--Color);

    color: var(--button--m-link--Color);
    background-color: var(--button--m-link--BackgroundColor);
}

:host([variant="plain"]) #main {
    --button--disabled--Color: var(--button--m-plain--disabled--Color);
    --button--disabled--BackgroundColor: var(--button--m-plain--disabled--BackgroundColor);

    color: var(--button--m-plain--Color);
    background-color: var(--button--m-plain--BackgroundColor);
}

:host([variant="control"]) #main {
    --button--BorderRadius: var(--button--m-control--BorderRadius);
    --button--disabled--BackgroundColor: var(--button--m-control--disabled--BackgroundColor);
    --button--after--BorderWidth: var(--button--m-control--after--BorderWidth);

    color: var(--button--m-control--Color);
    background-color: var(--button--m-control--BackgroundColor);

    --button--after--BorderColor: var(--button--m-control--after--BorderTopColor)
        var(--button--m-control--after--BorderRightColor)
        var(--button--m-control--after--BorderBottomColor)
        var(--button--m-control--after--BorderLeftColor);
}

:host([variant="primary"]:hover) #main {
    --button--m-primary--Color: var(--button--m-primary--hover--Color);
    --button--m-primary--BackgroundColor: var(--button--m-primary--hover--BackgroundColor);
}

:host([variant="primary"]:focus) #main {
    --button--m-primary--Color: var(--button--m-primary--focus--Color);
    --button--m-primary--BackgroundColor: var(--button--m-primary--focus--BackgroundColor);
}

:host([variant="primary"]:active) #main {
    --button--m-primary--Color: var(--button--m-primary--active--Color);
    --button--m-primary--BackgroundColor: var(--button--m-primary--active--BackgroundColor);
}

:host([variant="secondary"]:hover) #main {
    --button--m-secondary--Color: var(--button--m-secondary--hover--Color);
    --button--m-secondary--BackgroundColor: var(--button--m-secondary--hover--BackgroundColor);
    --button--after--BorderColor: var(--button--m-secondary--hover--after--BorderColor);
}

:host([variant="secondary"]:focus) #main {
    --button--m-secondary--Color: var(--button--m-secondary--focus--Color);
    --button--m-secondary--BackgroundColor: var(--button--m-secondary--focus--BackgroundColor);
    --button--after--BorderColor: var(--button--m-secondary--focus--after--BorderColor);
}

:host([variant="tertiary"]:hover) #main {
    --button--m-tertiary--Color: var(--button--m-tertiary--hover--Color);
    --button--m-tertiary--BackgroundColor: var(--button--m-tertiary--hover--BackgroundColor);
    --button--after--BorderColor: var(--button--m-tertiary--hover--after--BorderColor);
}

:host([variant="tertiary"]:focus) #main {
    --button--m-tertiary--Color: var(--button--m-tertiary--focus--Color);
    --button--m-tertiary--BackgroundColor: var(--button--m-tertiary--focus--BackgroundColor);
    --button--after--BorderColor: var(--button--m-tertiary--focus--after--BorderColor);
}

:host([variant="tertiary"]:active) #main {
    --button--m-tertiary--Color: var(--button--m-tertiary--active--Color);
    --button--m-tertiary--BackgroundColor: var(--button--m-tertiary--active--BackgroundColor);
    --button--after--BorderColor: var(--button--m-tertiary--active--after--BorderColor);
}

:host([variant="control"]:hover) #main {
    --button--m-control--Color: var(--button--m-control--hover--Color);
    --button--m-control--BackgroundColor: var(--button--m-control--hover--BackgroundColor);
    --button--m-control--after--BorderBottomColor: var(
        --button--m-control--hover--after--BorderBottomColor
    );
}

:host([variant="control"]:active) #main {
    --button--m-control--Color: var(--button--m-control--active--Color);
    --button--m-control--BackgroundColor: var(--button--m-control--active--BackgroundColor);
    --button--m-control--after--BorderBottomColor: var(
        --button--m-control--active--after--BorderBottomColor
    );
}

:host([variant="control"]:focus) #main {
    --button--m-control--Color: var(--button--m-control--focus--Color);
    --button--m-control--BackgroundColor: var(--button--m-control--focus--BackgroundColor);
    --button--m-control--after--BorderBottomColor: var(
        --button--m-control--focus--after--BorderBottomColor
    );
}

:host([variant="plain"]:hover) #main {
    --button--m-plain--Color: var(--button--m-plain--hover--Color);
    --button--m-plain--BackgroundColor: var(--button--m-plain--hover--BackgroundColor);
}

:host([variant="plain"]:active) #main {
    --button--m-plain--Color: var(--button--m-plain--active--Color);
    --button--m-plain--BackgroundColor: var(--button--m-plain--active--BackgroundColor);
}

:host([variant="plain"]:focus) #main {
    --button--m-plain--Color: var(--button--m-plain--focus--Color);
    --button--m-plain--BackgroundColor: var(--button--m-plain--focus--BackgroundColor);
}

:host([variant="secondary"][active]) #main {
    --button--m-secondary--Color: var(--button--m-secondary--active--Color);
    --button--m-secondary--BackgroundColor: var(--button--m-secondary--active--BackgroundColor);
    --button--after--BorderColor: var(--button--m-secondary--active--after--BorderColor);
}

:host([severity="danger"]) #main {
    color: var(--button--m-danger--Color);
    background-color: var(--button--m-danger--BackgroundColor);
}

:host([severity="warning"]) #main {
    color: var(--button--m-warning--Color);
    background-color: var(--button--m-warning--BackgroundColor);
}

:host([severity="danger"]:hover) #main {
    --button--m-danger--Color: var(--button--m-danger--hover--Color);
    --button--m-danger--BackgroundColor: var(--button--m-danger--hover--BackgroundColor);
}

:host([severity="danger"]:focus) #main {
    --button--m-danger--Color: var(--button--m-danger--focus--Color);
    --button--m-danger--BackgroundColor: var(--button--m-danger--focus--BackgroundColor);
}

:host([severity="danger"]:active) #main {
    --button--m-danger--Color: var(--button--m-danger--active--Color);
    --button--m-danger--BackgroundColor: var(--button--m-danger--active--BackgroundColor);
}

:host([severity="warning"]:hover) #main {
    --button--m-warning--Color: var(--button--m-warning--hover--Color);
    --button--m-warning--BackgroundColor: var(--button--m-warning--hover--BackgroundColor);
}

:host([severity="warning"]:focus) #main {
    --button--m-warning--Color: var(--button--m-warning--focus--Color);
    --button--m-warning--BackgroundColor: var(--button--m-warning--focus--BackgroundColor);
}

:host([severity="warning"]:active) #main {
    --button--m-warning--Color: var(--button--m-warning--active--Color);
    --button--m-warning--BackgroundColor: var(--button--m-warning--active--BackgroundColor);
}

:host([variant="secondary"][severity="danger"]):hover #main {
    --button--m-secondary--m-danger--Color: var(--button--m-secondary--m-danger--hover--Color);
    --button--m-secondary--m-danger--BackgroundColor: var(
        --button--m-secondary--m-danger--hover--BackgroundColor
    );
    --button--after--BorderColor: var(--button--m-secondary--m-danger--hover--after--BorderColor);
}

:host([variant="secondary"][severity="danger"]):focus #main {
    --button--m-secondary--m-danger--Color: var(--button--m-secondary--m-danger--focus--Color);
    --button--m-secondary--m-danger--BackgroundColor: var(
        --button--m-secondary--m-danger--focus--BackgroundColor
    );
    --button--after--BorderColor: var(--button--m-secondary--m-danger--focus--after--BorderColor);
}

:host([variant="secondary"][severity="danger"]):active #main {
    --button--m-secondary--m-danger--Color: var(--button--m-secondary--m-danger--active--Color);
    --button--m-secondary--m-danger--BackgroundColor: var(
        --button--m-secondary--m-danger--active--BackgroundColor
    );
    --button--after--BorderColor: var(--button--m-secondary--m-danger--active--after--BorderColor);
}

:host([variant="link"][severity="danger"]):hover #main {
    --button--m-link--m-danger--Color: var(--button--m-link--m-danger--hover--Color);
    --button--m-link--m-danger--BackgroundColor: var(
        --button--m-link--m-danger--hover--BackgroundColor
    );
}

:host([variant="link"][severity="danger"]):focus #main {
    --button--m-link--m-danger--Color: var(--button--m-link--m-danger--focus--Color);
    --button--m-link--m-danger--BackgroundColor: var(
        --button--m-link--m-danger--focus--BackgroundColor
    );
}

:host([variant="link"][severity="danger"]):active #main {
    --button--m-link--m-danger--Color: var(--button--m-link--m-danger--active--Color);
    --button--m-link--m-danger--BackgroundColor: var(
        --button--m-link--m-danger--active--BackgroundColor
    );
}

:host([variant="control"]) #main::after {
    border-radius: initial;

    --button--after--BorderColor: var(--button--m-control--after--BorderTopColor)
        var(--button--m-control--after--BorderRightColor)
        var(--button--m-control--after--BorderBottomColor)
        var(--button--m-control--after--BorderLeftColor);
}

:host([variant="control"]):hover #main::after {
    border-block-end-width: var(--button--m-control--hover--after--BorderBottomWidth);
}

:host([variant="control"]):active #main::after {
    border-block-end-width: var(--button--m-control--active--after--BorderBottomWidth);
}

:host([variant="control"]):focus #main::after {
    border-block-end-width: var(--button--m-control--focus--after--BorderBottomWidth);
}

:host([variant="control"][expanded]) #main {
    --button--m-control--Color: var(--button--m-control--m-expanded--Color);
    --button--m-control--BackgroundColor: var(--button--m-control--m-expanded--BackgroundColor);
    --button--m-control--after--BorderBottomColor: var(
        --button--m-control--m-expanded--after--BorderBottomColor
    );
}

:host([variant="control"][expanded]) #main::after {
    border-block-end-width: var(--button--m-control--m-expanded--after--BorderBottomWidth);
}

:host([icon-position="start"]) #main {
    margin-inline-end: var(--button__icon--m-start--MarginRight);
}

:host([icon-position="end"]) #main {
    margin-inline-start: var(--button__icon--m-end--MarginLeft);
}

:host([theme="dark"]) {
    --button--disabled--Color: var(--pf-v5-global--disabled-color--300);
    --button--m-primary--BackgroundColor: var(--pf-v5-global--primary-color--300);
    --button--m-primary--Color: var(--pf-v5-global--primary-color--400);
    --button--m-tertiary--after--BorderColor: var(--pf-v5-global--BorderColor--100);
    --button--m-tertiary--Color: var(--pf-v5-global--palette--black-100);
    --button--m-tertiary--hover--after--BorderColor: var(--pf-v5-global--BorderColor--100);
    --button--m-tertiary--hover--Color: var(--pf-v5-global--palette--black-100);
    --button--m-tertiary--focus--after--BorderColor: var(--pf-v5-global--BorderColor--100);
    --button--m-tertiary--focus--Color: var(--pf-v5-global--palette--black-100);
    --button--m-tertiary--active--after--BorderColor: var(--pf-v5-global--BorderColor--100);
    --button--m-tertiary--active--Color: var(--pf-v5-global--palette--black-100);
    --button--m-warning--Color: var(--pf-v5-global--palette--black-900);
    --button--m-warning--hover--Color: var(--pf-v5-global--palette--black-900);
    --button--m-warning--focus--Color: var(--pf-v5-global--palette--black-900);
    --button--m-warning--active--Color: var(--pf-v5-global--palette--black-900);
    --button--m-warning--hover--BackgroundColor: var(--pf-v5-global--warning-color--200);
    --button--m-warning--focus--BackgroundColor: var(--pf-v5-global--warning-color--200);
    --button--m-warning--active--BackgroundColor: var(--pf-v5-global--warning-color--200);
    --button--m-danger--Color: var(--pf-v5-global--palette--black-900);
    --button--m-danger--hover--Color: var(--pf-v5-global--palette--black-900);
    --button--m-danger--focus--Color: var(--pf-v5-global--palette--black-900);
    --button--m-danger--active--Color: var(--pf-v5-global--palette--black-900);
    --button--m-link--disabled--Color: var(--pf-v5-global--disabled-color--100);
    --button--m-control--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
    --button--m-control--hover--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
    --button--m-control--active--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
    --button--m-control--focus--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
    --button--m-control--m-expanded--BackgroundColor: var(--pf-v5-global--BackgroundColor--400);
    --button--m-control--after--BorderTopColor: transparent;
    --button--m-control--after--BorderRightColor: transparent;
    --button--m-control--after--BorderBottomColor: var(--pf-v5-global--BorderColor--400);
    --button--m-control--after--BorderLeftColor: transparent;
    --button--m-control--hover--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
    --button--m-control--active--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
    --button--m-control--focus--after--BorderBottomColor: var(--pf-v5-global--primary-color--100);
    --button--m-control--m-expanded--after--BorderBottomColor: var(
        --pf-v5-global--primary-color--100
    );
    --button--m-control--disabled--BackgroundColor: var(--pf-v5-global--disabled-color--200);
    --button--m-primary__c-badge--BorderColor: var(--pf-v5-global--Color--100);
}

:host([theme="dark"][variant="control"][disabled]) #main::after {
    border: 0;
    border-block-end: var(--pf-v5-global--BorderWidth--sm) solid
        var(--pf-v5-global--palette--black-700);
}

:host:disabled {
    color: var(--button--disabled--Color);
    background-color: var(--button--disabled--BackgroundColor);
}

:host:disabled #main::after {
    border-color: var(--button--disabled--after--BorderColor);
}

:host([variant="link"]:not[inline]):hover #main {
    --button--m-link--Color: var(--button--m-link--hover--Color);
    --button--m-link--BackgroundColor: var(--button--m-link--hover--BackgroundColor);
}

:host([variant="link"]:not[inline]):focus #main {
    --button--m-link--Color: var(--button--m-link--focus--Color);
    --button--m-link--BackgroundColor: var(--button--m-link--focus--BackgroundColor);
}

:host([variant="link"]:not[inline]):active #main {
    --button--m-link--Color: var(--button--m-link--active--Color);
    --button--m-link--BackgroundColor: var(--button--m-link--active--BackgroundColor);
}

:host([type="link"][size="lg"]) {
    --button--FontSize: var(--button--m-link--m-display-lg--FontSize);
}

:host([inline]) #main {
    --button--FontSize: var(--button--m-link--m-inline--FontSize);
    --button__progress--Left: var(--button--m-link--m-inline__progress--Left);

    display: inline;
    padding-block-start: var(--button--m-link--m-inline--PaddingTop);
    padding-block-end: var(--button--m-link--m-inline--PaddingBottom);
    padding-inline-start: var(--button--m-link--m-inline--PaddingLeft);
    padding-inline-end: var(--button--m-link--m-inline--PaddingRight);
    text-align: start;
    white-space: normal;
    cursor: pointer;
}

:host([variant="link"][severity="danger"]) #main {
    --button--m-danger--Color: var(--button--m-link--m-danger--Color);
    --button--m-danger--BackgroundColor: var(--button--m-link--m-danger--BackgroundColor);
}

:is(:host:disabled, :host([disabled])) #main {
    pointer-events: none;
    color: var(--button--disabled--Color);
    background-color: var(--button--disabled--BackgroundColor);
}

:is(:host:disabled, :host([disabled])) #main::after {
    border-color: var(--button--disabled--after--BorderColor);
}

:is(:host:disabled, :host([disabled])) [part="anchor"] {
    text-decoration: underline;
}