button {
    /* reset */
    -webkit-appearance: none;
    border-radius: 0;
    text-align: inherit;
    background: none;
    box-shadow: none;
    padding: 0;
    cursor: pointer;
    border: none;
    color: inherit;
    font: inherit;
}

.pf-c-button,
.pf-v5-c-button {
    /* PatternFly v4 */
    --pf-c-button--PaddingTop: 12px !important;
    --pf-c-button--PaddingRight: 24px;
    --pf-c-button--PaddingBottom: 12px !important;
    --pf-c-button--PaddingLeft: 24px;
    --pf-c-button--m-secondary--BackgroundColor: var(--plid-secondary);
    --pf-c-button--after--BorderWidth: 2px;
    --pf-c-button--FontWeight: bold;
    --pf-c-button--BorderRadius: var(--plid-button-border-radius);
    --pf-c-button--after--BorderRadius: var(--plid-button-border-radius);

    /* PatternFly v5 */
    --pf-v5-c-button--PaddingTop: 12px;
    --pf-v5-c-button--PaddingRight: 24px;
    --pf-v5-c-button--PaddingBottom: 12px;
    --pf-v5-c-button--PaddingLeft: 24px;
    --pf-v5-c-button--m-secondary--BackgroundColor: var(--plid-secondary);
    --pf-v5-c-button--after--BorderWidth: 2px;
    --pf-v5-c-button--FontWeight: bold;
    --pf-v5-c-button--BorderRadius: var(--plid-button-border-radius);
    --pf-v5-c-button--after--BorderRadius: var(--plid-button-border-radius);

    font-family: ButtonsText, StandardText;
    font-size: 1.6rem;
    line-height: 1.9rem;
    outline: none !important;
}

.pf-c-button:active,
.pf-c-button:focus,
.pf-c-button:hover,
.pf-v5-c-button:active,
.pf-v5-c-button:focus,
.pf-v5-c-button:hover {
    text-decoration: none;
}

.pf-c-button.pf-m-disabled,
.pf-c-button[disabled],
.pf-v5-c-button.pf-m-disabled,
.pf-v5-c-button[disabled] {
    opacity: 0.2;
}

/*
================================================================================
===== Primary ==================================================================
================================================================================
*/

.pf-c-button.pf-m-primary,
.pf-c-button.pf-m-primary.pf-m-disabled,
.pf-c-button.pf-m-primary[disabled],
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-primary.pf-m-disabled,
.pf-v5-c-button.pf-m-primary[disabled] {
    color: var(--plid-button-primary-font-color);

    /* PatternFly v4 */
    --pf-c-button--m-primary--active--BackgroundColor: var(--plid-primary--focus);
    --pf-c-button--m-primary--focus--BackgroundColor: var(--plid-primary);
    --pf-c-button--m-primary--hover--BackgroundColor: var(--plid-primary--focus);
    --pf-c-button--disabled--BackgroundColor: var(--plid-primary);
    --pf-c-button--m-primary--Color: var(--pf-global--Neutral-White);
    --pf-global--link--Color--hover: var(--pf-global--Neutral-White);
    --pf-c-button--disabled--Color: var(--pf-global--Neutral-White);

    /* PatternFly v5 */
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--plid-primary--focus);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--plid-primary);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--plid-primary--focus);
    --pf-v5-c-button--disabled--BackgroundColor: var(--plid-primary);
    --pf-v5-c-button--m-primary--Color: var(--pf-v5-global--Neutral-White);
    --pf-v5-global--link--Color--hover: var(--pf-v5-global--Neutral-White);
    --pf-v5-c-button--disabled--Color: var(--pf-v5-global--Neutral-White);
    
    display: block;
    width: 100%;
}

.pf-c-button.pf-m-primary:focus,
.pf-v5-c-button.pf-m-primary:focus {
    box-shadow: var(--plid-button-primary-focus-box-shadow);
}

@media (min-width: 768px) {
    .pf-c-button.pf-m-primary,
    .pf-c-button.pf-m-primary.pf-m-disabled,
    .pf-c-button.pf-m-primary[disabled],
    .pf-v5-c-button.pf-m-primary,
    .pf-v5-c-button.pf-m-primary.pf-m-disabled,
    .pf-v5-c-button.pf-m-primary[disabled] {
        display: inline-block;
        width: auto;
    }
    
    .plid-login-button,
    .plid-register-button {
        min-width: 240px;
    }
}

.pf-c-button.pf-m-primary.plid-button--outline,
.pf-v5-c-button.pf-m-primary.plid-button--outline {
    /* PatternFly v4 */
    --pf-c-button--after--BorderColor: var(--plid-primary);
    --pf-c-button--m-primary--BackgroundColor: transparent;
    --pf-c-button--disabled--after--BorderColor: var(--plid-primary);
    --pf-c-button--disabled--BackgroundColor: transparent;

    /* PatternFly v5 */
    --pf-v5-c-button--after--BorderColor: var(--plid-primary);
    --pf-v5-c-button--m-primary--BackgroundColor: transparent;
    --pf-v5-c-button--disabled--after--BorderColor: var(--plid-primary);
    --pf-v5-c-button--disabled--BackgroundColor: transparent;

    color: var(--plid-primary);
}

.pf-c-button.pf-m-primary.plid-button--outline:active,
.pf-c-button.pf-m-primary.plid-button--outline:hover,
.pf-c-button.pf-m-primary.plid-button--outline:focus,
.pf-v5-c-button.pf-m-primary.plid-button--outline:active,
.pf-v5-c-button.pf-m-primary.plid-button--outline:hover,
.pf-v5-c-button.pf-m-primary.plid-button--outline:focus {
    /* PatternFly v4 */
    --pf-c-button--m-primary--BackgroundColor: var(--plid-primary--20) !important;
    
    /* PatternFly v5 */
    --pf-v5-c-button--m-primary--BackgroundColor: var(--plid-primary--20) !important;
}

/*
================================================================================
===== Secondary ================================================================
================================================================================
*/

.pf-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-secondary {
    color: var(--plid-button-secondary-font-color);
    
    /* PatternFly v4 */
    --pf-c-button--after--BorderColor: var(--plid-secondary);
    --pf-c-button--m-secondary--active--BackgroundColor: var(--plid-secondary--focus);
    --pf-c-button--m-secondary--focus--BackgroundColor: var(--plid-secondary);
    --pf-c-button--m-secondary--hover--BackgroundColor: var(--plid-secondary--focus);
    --pf-global--link--Color--hover: var(--pf-global--Neutral-White);
    --pf-global--link--Color--hover: var(--pf-global--Neutral-White);
    --pf-c-button--disabled--Color: var(--pf-global--Neutral-White);
    --pf-c-button--disabled--BackgroundColor: var(--plid-secondary);

    /* PatternFly v5 */
    --pf-v5-c-button--after--BorderColor: var(--plid-secondary);
    --pf-v5-c-button--m-secondary--active--BackgroundColor: var(--plid-secondary--focus);
    --pf-v5-c-button--m-secondary--focus--BackgroundColor: var(--plid-secondary);
    --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--plid-secondary--focus);
    --pf-v5-global--link--Color--hover: var(--pf-v5-global--Neutral-White);
    --pf-v5-global--link--Color--hover: var(--pf-v5-global--Neutral-White);
    --pf-v5-c-button--disabled--Color: var(--pf-v5-global--Neutral-White);
    --pf-v5-c-button--disabled--BackgroundColor: var(--plid-secondary);
}

.pf-c-button.pf-m-secondary:active,
.pf-c-button.pf-m-secondary:hover,
.pf-c-button.pf-m-secondary:focus,
.pf-v5-c-button.pf-m-secondary:active,
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-secondary:focus {
    /* PatternFly v4 */
    --pf-c-button--after--BorderColor: var(--plid-secondary--focus);

    /* PatternFly v5 */
    --pf-v5-c-button--after--BorderColor: var(--plid-secondary--focus);
}

.pf-c-button.pf-m-secondary:focus,
.pf-v5-c-button.pf-m-secondary:focus {
    box-shadow: var(--plid-button-secondary-focus-box-shadow);
}

.pf-c-button.pf-m-secondary.plid-button--outline,
.pf-v5-c-button.pf-m-secondary.plid-button--outline {
    /* PatternFly v4 */
    --pf-v5-c-button--after--BorderColor: var(--plid-secondary);
    --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
    --pf-v5-c-button--disabled--after--BorderColor: var(--plid-secondary);
    --pf-v5-c-button--disabled--BackgroundColor: transparent;

    /* PatternFly v5 */
    --pf-c-button--after--BorderColor: var(--plid-secondary);
    --pf-c-button--m-secondary--BackgroundColor: transparent;
    --pf-c-button--disabled--after--BorderColor: var(--plid-secondary);
    --pf-c-button--disabled--BackgroundColor: transparent;

    color: var(--plid-secondary);
}

.pf-c-button.pf-m-secondary.plid-button--outline:active,
.pf-c-button.pf-m-secondary.plid-button--outline:hover,
.pf-c-button.pf-m-secondary.plid-button--outline:focus,
.pf-v5-c-button.pf-m-secondary.plid-button--outline:active,
.pf-v5-c-button.pf-m-secondary.plid-button--outline:hover,
.pf-v5-c-button.pf-m-secondary.plid-button--outline:focus {
    /* PatternFly v4 */
    --pf-c-button--m-secondary--BackgroundColor: var(--plid-secondary--20) !important;

    /* PatternFly v5 */
    --pf-v5-c-button--m-secondary--BackgroundColor: var(--plid-secondary--20) !important;
}

/*
================================================================================
===== Danger ===================================================================
================================================================================
*/

.pf-c-button.pf-m-danger,
.pf-v5-c-button.pf-m-danger {
    /* PatternFly v4 */
    --pf-c-button--after--BorderColor: var(--plid-danger);
    --pf-c-button--m-danger--active--BackgroundColor: var(--plid-danger--focus);
    --pf-c-button--m-danger--focus--BackgroundColor: var(--plid-danger);
    --pf-c-button--m-danger--hover--BackgroundColor: var(--plid-danger--focus);
    --pf-global--link--Color--hover: var(--pf-global--Neutral-White);
    --pf-global--link--Color--hover: var(--pf-global--Neutral-White);
    --pf-c-button--disabled--Color: var(--pf-global--Neutral-White);
    --pf-c-button--disabled--BackgroundColor: var(--plid-danger);

    /* PatternFly v5 */
    --pf-v5-c-button--after--BorderColor: var(--plid-danger);
    --pf-v5-c-button--m-danger--active--BackgroundColor: var(--plid-danger--focus);
    --pf-v5-c-button--m-danger--focus--BackgroundColor: var(--plid-danger);
    --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--plid-danger--focus);
    --pf-v5-global--link--Color--hover: var(--pf-v5-global--Neutral-White);
    --pf-v5-global--link--Color--hover: var(--pf-v5-global--Neutral-White);
    --pf-v5-c-button--disabled--Color: var(--pf-v5-global--Neutral-White);
    --pf-v5-c-button--disabled--BackgroundColor: var(--plid-danger);
    
    color: var(--pf-v5-global--Neutral-White);
}

.pf-c-button.pf-m-danger:active,
.pf-c-button.pf-m-danger:hover,
.pf-c-button.pf-m-danger:focus,
.pf-v5-c-button.pf-m-danger:active,
.pf-v5-c-button.pf-m-danger:hover,
.pf-v5-c-button.pf-m-danger:focus {
    /* PatternFly v4 */
    --pf-c-button--after--BorderColor: var(--plid-danger--focus);

    /* PatternFly v5 */
    --pf-v5-c-button--after--BorderColor: var(--plid-danger--focus);
}

.pf-c-button.pf-m-danger.plid-button--outline,
.pf-v5-c-button.pf-m-danger.plid-button--outline {
    /* PatternFly v4 */
    --pf-c-button--after--BorderColor: var(--plid-danger);
    --pf-c-button--m-danger--BackgroundColor: transparent;
    --pf-c-button--disabled--after--BorderColor: var(--plid-danger);
    --pf-c-button--disabled--BackgroundColor: transparent;

    /* PatternFly v5 */
    --pf-v5-c-button--after--BorderColor: var(--plid-danger);
    --pf-v5-c-button--m-danger--BackgroundColor: transparent;
    --pf-v5-c-button--disabled--after--BorderColor: var(--plid-danger);
    --pf-v5-c-button--disabled--BackgroundColor: transparent;

    color: var(--plid-danger);
}

.pf-c-button.pf-m-danger.plid-button--outline:active,
.pf-c-button.pf-m-danger.plid-button--outline:hover,
.pf-c-button.pf-m-danger.plid-button--outline:focus,
.pf-v5-c-button.pf-m-danger.plid-button--outline:active,
.pf-v5-c-button.pf-m-danger.plid-button--outline:hover,
.pf-v5-c-button.pf-m-danger.plid-button--outline:focus {
    /* PatternFly v4 */
    --pf-c-button--m-danger--BackgroundColor: var(--plid-danger--20) !important;

    /* PatternFly v5 */
    --pf-v5-c-button--m-danger--BackgroundColor: var(--plid-danger--20) !important;
}

/*
================================================================================
===== Ghost ====================================================================
================================================================================
*/

.plid-button:focus {
    box-shadow: var(--plid-button-primary-focus-box-shadow);
}

.plid-button--ghost:active,
.plid-button--ghost:hover,
.plid-button--ghost:focus {
    text-decoration: none;
}

.plid-button--ghost {
    padding: 0;
    color: var(--plid-primary);
    font-weight: 700;
    text-decoration: underline;
}