/******************************************************************************
 *
 * CodeMeter License Portal
 * buttons.css
 *
 * Buttons for License Portal
 *
 * (c) 2024 - 2024: WIBU-SYSTEMS AG
 * info@wibu.com
 *
 *************************************************************************** */

input.icon-button {
    cursor: pointer;
    text-align: center;
    height: 26px;
    width: 26px;
    line-height: 10px;
    mask-size: 16px;
    -webkit-mask-size: 16px;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    background-color: var(--main-button-icon-color);
    border: none;
    padding: 0;
}

input.icon-button:disabled {
    cursor: default;
    background-color: var(--main-button-icon-color-disabled);
}

input.icon-button:hover:enabled, input.icon-button:focus {
    background-color: var(--main-button-icon-color-hover);
}

div.button-line input.icon-button {
    height: 24px;
    width: 24px;
    mask-size: 20px;
    -webkit-mask-size: 20px;
    margin: 5px 0 0 var(--main-padding);
}

div.table-line input.icon-button {
    height: 24px;
    width: 24px;
    mask-size: 16px;
    -webkit-mask-size: 16px;
    margin: 0 0 0 calc(var(--main-padding) /4);
}

div.main-icons input.icon-button {
    height: 32px;
    width: 32px;
    mask-size: 24px;
    -webkit-mask-size: 24px;
    margin: 0 0 0 calc(var(--main-padding) /4);
    background-color: var(--option-button-icon-color);
}

div.main-icons input.icon-button:hover {
    background-color: var(--option-button-icon-color-hover);
}

div.main-icons input.icon-button:disabled {
    cursor: default;
    background-color: var(--main-button-icon-color-disabled);
}

.badge {
    position: absolute;
    top: -10px;
    right: -3px;
    border-radius: 50%;
    font-size: 12px;
    background: var(--menu-background-color-hover);
    color: var(--menu-text-color-hover);
    width: 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
}

.notification {
    padding-right: 5px;
    position: relative;
    display: inline-block;
    border-radius: 2px;
}

/******************************************************************************
 * Buttons - generic settings
 *************************************************************************** */

button.main-button, button.option-button, input.main-button, input.option-button {
    cursor: pointer;
    border-radius: var(--border-radius);
    justify-content: center;
}

button.main-button:disabled, input.main-button:disabled, button.option-button:disabled, input.option-button:disabled {
    cursor: default;
}

button.main-button, input.main-button {
    background-color: var(--main-button-background-color);
    color: var(--main-button-text-color);
    border: 1px solid var(--main-button-border-color);
    min-width: 120px;
    text-align: center;
}

button.main-button:disabled, input.main-button:disabled {
    background-color: var(--main-button-background-color-disabled);
    border: 1px solid var(--main-button-border-color-disabled);
    color: var(--main-button-text-color-disabled);
}

button.main-button:hover:enabled, input.main-button:hover:enabled {
    background-color: var(--main-button-background-color-hover);
    border: 1px solid var(--main-button-border-color-hover);
    color: var(--main-button-text-color-hover);
}

button.option-button, input.option-button {
    background-color: var(--option-button-background-color);
    color: var(--option-button-text-color);
    border: 1px solid var(--option-button-border-color);
    padding: 0 3px 0 3px;
}

button.option-button:disabled, input.option-button:disabled {
    background-color: var(--option-button-background-color-disabled);
    border: 1px solid var(--option-button-border-color-disabled);
    color: var(--option-button-text-color-disabled);
}

button.option-button:hover:enabled, input.option-button:hover:enabled {
    background-color: var(--option-button-background-color-hover);
    border: 1px solid var(--option-button-border-color-hover);
    color: var(--option-button-text-color-hover);
}

div.button-line button.main-button, div.button-line button.option-button, div.button-line input.main-button, div.button-line input.option-button {
    height: 34px;
    line-height: 32px;
    margin: 0 0 0 var(--main-padding);
    padding: 0 var(--main-padding) 0 var(--main-padding);
}

div.table-line button.main-button, div.table-line input.main-button {
    height: 26px;
    line-height: 24px;
    margin: 0 0 0 calc(var(--main-padding) / 2);
    padding: 0 calc(var(--main-padding) / 2) 0 calc(var(--main-padding) / 2);
}

div.table-line button.option-button, div.table-line input.option-button {
    height: 28px;
    line-height: 26px;
    margin: 0 0 0 calc(var(--main-padding) / 2);
    padding: 0 calc(var(--main-padding) / 2) 0 calc(var(--main-padding) / 2);
}

a[onclick] {
    cursor: pointer;
}