/*#region Icon Button*/

.icon-button {
    border-radius: 30px;
}

    .icon-button.light {
        background-color: var(--white-shade-2);
        color: var(--trimble-color-black);
    }

        .icon-button.light:hover {
            background-color: var(--white-shade-1);
        }

    .icon-button.dark {
        background-color: var(--black-shade-2);
        color: var(--trimble-color-white);
    }

        .icon-button.dark:hover {
            background-color: var(--black-shade-1);
        }

/*#endregion*/

/*#region Button Icons*/

.button-icon {
    font-size: 13px;
    margin-right: 5px;
}

    .button-icon.light {
        color: var(--trimble-color-white);
    }

    .button-icon.dark {
        color: var(--trimble-color-blue-dark-2);
    }

    .button-icon.success {
        color: var(--trimble-color-green);
    }

        .button-icon.success.light {
            color: var(--trimble-color-green-light-1);
        }

    .button-icon.failure {
        color: var(--trimble-color-red);
    }

        .button-icon.failure.light {
            color: var(--trimble-color-red-pale);
        }

    .button-icon.no-margin {
        margin-right: 0;
    }

/*#endregion*/

/*#region Action Buttons*/

.action-button {
    min-width: 100px;
    border-radius: 8px;
}

    label.action-button {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 32px;
        padding: 0 15px;
        border-width: 1px;
        border-style: solid;
        cursor: pointer;
    }

    .action-button.delete {
        color: var(--trimble-color-white);
        background-color: var(--trimble-color-red);
        border-color: var(--trimble-color-red-light);
    }

        .action-button.delete:hover,
        .action-button.delete:active,
        .action-button.delete:focus {
            color: var(--trimble-color-white);
            background-color: var(--trimble-color-red-light);
            border-color: var(--trimble-color-red);
        }

    .action-button.edit {
        color: var(--trimble-color-white);
        background-color: var(--trimble-color-blue-dark);
        border-color: var(--trimble-color-blue-light);
    }

        .action-button.edit:hover,
        .action-button.edit:active,
        .action-button.edit:focus {
            color: var(--trimble-color-white);
            background-color: var(--trimble-color-blue-light);
            border-color: var(--trimble-color-blue-dark);
        }

    .action-button.create {
        color: var(--trimble-color-white);
        background-color: var(--trimble-color-green);
        border-color: var(--trimble-color-green-light);
    }

        .action-button.create:hover,
        .action-button.create:active,
        .action-button.create:focus {
            color: var(--trimble-color-white);
            background-color: var(--trimble-color-green-light);
            border-color: var(--trimble-color-green);
        }

    .action-button.view {
        color: var(--black-light);
        background-color: var(--white-shade-4);
        border-color: var(--trimble-color-gray-0);
    }

        .action-button.view:hover,
        .action-button.view:active,
        .action-button.view:focus {
            color: var(--black-light);
            background-color: var(--trimble-color-gray-0);
            border-color: var(--trimble-color-gray-0);
        }

/*#endregion*/

/*#region Danger Buttons*/

.danger-button {
    color: var(--trimble-color-white);
    background-color: var(--trimble-color-red);
    border-color: var(--trimble-color-red-light);
}

    .danger-button:hover,
    .danger-button:active,
    .danger-button:focus {
        color: var(--trimble-color-white);
        background-color: var(--trimble-color-red-light);
        border-color: var(--trimble-color-red);
    }

.danger-button-link {
    color: var(--trimble-color-red);
}

    .danger-button-link:hover,
    .danger-button-link:active,
    .danger-button-link:focus {
        color: var(--trimble-color-red);
        background-color: var(--white-shade-2);
        border-color: var(--white-shade-2);
    }

/*#endregion*/

/*#region Secondary Buttons*/
.secondary-button {
    color: var(--black-light);
    background-color: var(--white-shade-4);
    border-color: var(--trimble-color-gray-0);
}

    .secondary-button:hover,
    .secondary-button:active,
    .secondary-button:focus {
        color: var(--black-light);
        background-color: var(--trimble-color-gray-light);
        border-color: var(--trimble-color-gray-0);
    }

/*#endregion*/

/*#region Primary Buttons*/

.primary-button {
    color: var(--trimble-color-white);
    background-color: var(--trimble-color-blue-dark);
    border-color: var(--trimble-color-blue-light);
}

    .primary-button:hover,
    .primary-button:active,
    .primary-button:focus {
        color: var(--trimble-color-white);
        background-color: var(--trimble-color-blue-light);
        border-color: var(--trimble-color-blue-dark);
    }
/*#endregion*/

/*#region Create Buttons*/

.create-button {
    color: var(--trimble-color-white);
    background-color: var(--trimble-color-green);
    border-color: var(--trimble-color-green-light);
}

    .create-button:hover,
    .create-button:active,
    .create-button:focus {
        color: var(--trimble-color-white);
        background-color: var(--trimble-color-green-light);
        border-color: var(--trimble-color-green);
    }
/*#endregion*/

.button-text {
    font-size: 13px;
    font-family: var(--font-family-roboto-flex);
    font-weight: 500;
    margin: 5px;
}

/*#region Action Icon Buttons (small icon-only buttons used in cards and tables)*/

.action-button-icon {
    padding: 2px 6px;
    color: var(--trimble-color-blue) !important;
}

.action-button-icon:hover {
    color: var(--trimble-color-blue-dark) !important;
}

.action-button-icon.edit {
    color: var(--trimble-color-blue-dark) !important;
}

.action-button-icon.edit:hover {
    color: var(--trimble-color-blue-light) !important;
}

.action-button-icon.danger {
    color: var(--trimble-color-red) !important;
}

.action-button-icon.danger:hover {
    color: var(--trimble-color-red-light) !important;
}

/*#endregion*/