:root {
    --color-default-text: #333;
    --color-default-bg: #fff;
    --color-default-border: #ccc;
    --color-default-border-hover: #adadad;
    --color-default-focus-outline: #686b8335;

    --color-primary-text: #fff;
    --color-primary-bg: #437894;
    --color-primary-border: #60849e;
    --color-primary-bg-hover: #3f5c7e;
    --color-primary-border-hover: #456683;
    --color-primary-focus-outline: rgba(65, 43, 38, 0.21);

    --color-secondary-text: #fff;
    --color-secondary-bg: #7b808a;
    --color-secondary-border: #8c95a2;
    --color-secondary-bg-hover: #666e80;
    --color-secondary-border-hover: #848a9b;
    --color-secondary-focus-outline: rgba(128, 112, 102, 0.21);

    --color-success-text: #fff;
    --color-success-bg: #529b56;
    --color-success-border: #62a766;
    --color-success-bg-hover: #49904d;
    --color-success-border-hover: #57995a;
    --color-success-focus-outline: #30911e35;

    --color-danger-text: #fff;
    --color-danger-bg: #d35148;
    --color-danger-border: #d46860;
    --color-danger-bg-hover: #c7483f;
    --color-danger-border-hover: #ca5a52;
    --color-danger-focus-outline: #c9291d35;

    --color-warning-text: #fff;
    --color-warning-bg: #ffd86e;
    --color-warning-border: #ffdca6;
    --color-warning-bg-hover: #f0c85b;
    --color-warning-border-hover: #fdd8a1;
    --color-warning-focus-outline: #ffbb0035;

    --color-info-text: #fff;
    --color-info-bg: #6294b6;
    --color-info-border: #7ea9c5;
    --color-info-bg-hover: #4a7b9c;
    --color-info-border-hover: #6c99b8;
    --color-info-focus-outline: #13588635;

    --color-dark-text: #fff;
    --color-dark-bg: #343a40;
    --color-dark-border: #343a40;
    --color-dark-bg-hover: #23272b;
    --color-dark-border-hover: #1d2124;
    --color-dark-focus-outline: #00377235;

    --color-light-text: #212529;
    --color-light-bg: #f4f5f7;
    --color-light-border: #f8f9fa;
    --color-light-bg-hover: #eef0f1;
    --color-light-border-hover: #dae0e5;
    --color-light-focus-outline: #7a9ec535;

    --color-link-text: #007bff;
    --color-link-hover: #0056b3;
}

.ws-btn {
    display: inline-block;
    padding: 0.35rem 1.35rem;
    font-size: 1rem;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    border: none;
    font-family: "Open Sans", "sans-serif";
    box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.35);
    transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
        border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
    border-radius: 6px;
}

.ws-btn:focus-visible {
    outline: none;
}

.ws-btn-sm {
    font-size: 0.9rem;
}

.ws-btn-icon-only {
    padding-left: 0.65rem;
    padding-right: 0.65rem;
}

.ws-btn-sharp {
    border-radius: 0;
}

.ws-btn-round {
    border-radius: 100px;
}

/* WS Button Styles */
.ws-btn-default {
    color: var(--color-default-text);
    background-color: var(--color-default-bg);
    border: 1px solid var(--color-default-border);
}

.ws-btn-default:hover,
.ws-btn-default:focus {
    color: var(--color-default-text);
    background-color: var(--color-default-bg);
    border-color: var(--color-default-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-default:active,
.ws-btn-default:focus {
    outline: 3px solid var(--color-default-focus-outline);
}

.ws-btn-primary {
    color: var(--color-primary-text);
    background-color: var(--color-primary-bg);
    border: 1px solid var(--color-primary-border);
}

.ws-btn-primary:hover,
.ws-btn-primary:focus {
    color: var(--color-primary-text);
    background-color: var(--color-primary-bg-hover);
    border-color: var(--color-primary-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-primary:active,
.ws-btn-primary:focus {
    outline: 3px solid var(--color-primary-focus-outline);
}

.ws-btn-secondary {
    color: var(--color-secondary-text);
    background-color: var(--color-secondary-bg);
    border: 1px solid var(--color-secondary-border);
}

.ws-btn-secondary:hover,
.ws-btn-secondary:focus {
    color: var(--color-secondary-text);
    background-color: var(--color-secondary-bg-hover);
    border-color: var(--color-secondary-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-secondary:active,
.ws-btn-secondary:focus {
    outline: 3px solid var(--color-secondary-focus-outline);
}

.ws-btn-success {
    color: var(--color-success-text);
    background-color: var(--color-success-bg);
    border: 1px solid var(--color-success-border);
}

.ws-btn-success:hover,
.ws-btn-success:focus {
    color: var(--color-success-text);
    background-color: var(--color-success-bg-hover);
    border-color: var(--color-success-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-success:active,
.ws-btn-success:focus {
    outline: 3px solid var(--color-success-focus-outline);
}

.ws-btn-danger {
    color: var(--color-danger-text);
    background-color: var(--color-danger-bg);
    border: 1px solid var(--color-danger-border);
}

.ws-btn-danger:hover,
.ws-btn-danger:focus {
    color: var(--color-danger-text);
    background-color: var(--color-danger-bg-hover);
    border-color: var(--color-danger-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-danger:active,
.ws-btn-danger:focus {
    outline: 3px solid var(--color-danger-focus-outline);
}

.ws-btn-warning {
    color: var(--color-warning-text);
    background-color: var(--color-warning-bg);
    border: 1px solid var(--color-warning-border);
}

.ws-btn-warning:hover,
.ws-btn-warning:focus {
    color: var(--color-warning-text);
    background-color: var(--color-warning-bg-hover);
    border-color: var(--color-warning-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-warning:active,
.ws-btn-warning:focus {
    outline: 3px solid var(--color-warning-focus-outline);
}

.ws-btn-info {
    color: var(--color-info-text);
    background-color: var(--color-info-bg);
    border: 1px solid var(--color-info-border);
}

.ws-btn-info:hover,
.ws-btn-info:focus {
    color: var(--color-info-text);
    background-color: var(--color-info-bg-hover);
    border-color: var(--color-info-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-info:active,
.ws-btn-info:focus {
    outline: 3px solid var(--color-info-focus-outline);
}

.ws-btn-dark {
    color: var(--color-dark-text);
    background-color: var(--color-dark-bg);
    border: 1px solid var(--color-dark-border);
}

.ws-btn-dark:hover,
.ws-btn-dark:focus {
    color: var(--color-dark-text);
    background-color: var(--color-dark-bg-hover);
    border-color: var(--color-dark-border-hover);
    box-shadow: rgba(53, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-dark:active,
.ws-btn-dark:focus {
    outline: 3px solid var(--color-dark-focus-outline);
}

.ws-btn-light {
    color: var(--color-light-text);
    background-color: var(--color-light-bg);
    border: 1px solid var(--color-light-border);
}

.ws-btn-light:hover,
.ws-btn-light:focus {
    color: var(--color-light-text);
    background-color: var(--color-light-bg-hover);
    border-color: var(--color-light-border-hover);
    box-shadow: rgba(50, 50, 93, 0.25) 0px 6px 12px -2px,
        rgba(0, 0, 0, 0.3) 0px 3px 7px -3px;
}

.ws-btn-light:active,
.ws-btn-light:focus {
    outline: 3px solid var(--color-light-focus-outline);
}

.ws-btn-link {
    padding: 0;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

.ws-btn-link:hover,
.ws-btn-link:focus {
    background-color: transparent;
    text-decoration: underline;
}

/* Outline Button Styles */
.ws-btn-outline-default {
    color: var(--color-default-text);
    background-color: transparent;
    border: 1px solid var(--color-default-border);
}

.ws-btn-outline-default:hover,
.ws-btn-outline-default:focus {
    color: var(--color-default-text);
    background-color: var(--color-default-bg-hover);
    border-color: var(--color-default-border-hover);
}

.ws-btn-outline-default:active,
.ws-btn-outline-default:focus {
    outline: 3px solid var(--color-default-focus-outline);
}

.ws-btn-outline-primary {
    color: var(--color-primary-bg);
    background-color: transparent;
    border: 1px solid var(--color-primary-bg);
}

.ws-btn-outline-primary:hover,
.ws-btn-outline-primary:focus {
    color: var(--color-primary-text);
    background-color: var(--color-primary-bg);
    border-color: var(--color-primary-bg);
}

.ws-btn-outline-primary:active,
.ws-btn-outline-primary:focus {
    outline: 3px solid var(--color-primary-focus-outline);
}

.ws-btn-outline-secondary {
    color: var(--color-secondary-bg);
    background-color: transparent;
    border: 1px solid var(--color-secondary-bg);
}

.ws-btn-outline-secondary:hover,
.ws-btn-outline-secondary:focus {
    color: var(--color-secondary-text);
    background-color: var(--color-secondary-bg);
    border-color: var(--color-secondary-bg);
}

.ws-btn-outline-secondary:active,
.ws-btn-outline-secondary:focus {
    outline: 3px solid var(--color-secondary-focus-outline);
}

.ws-btn-outline-success {
    color: var(--color-success-bg);
    background-color: transparent;
    border: 1px solid var(--color-success-bg);
}

.ws-btn-outline-success:hover,
.ws-btn-outline-success:focus {
    color: var(--color-success-text);
    background-color: var(--color-success-bg);
    border-color: var(--color-success-bg);
}

.ws-btn-outline-success:active,
.ws-btn-outline-success:focus {
    outline: 3px solid var(--color-success-focus-outline);
}

.ws-btn-outline-danger {
    color: var(--color-danger-bg);
    background-color: transparent;
    border: 1px solid var(--color-danger-bg);
}

.ws-btn-outline-danger:hover,
.ws-btn-outline-danger:focus {
    color: var(--color-danger-text);
    background-color: var(--color-danger-bg);
    border-color: var(--color-danger-bg);
}

.ws-btn-outline-danger:active,
.ws-btn-outline-danger:focus {
    outline: 3px solid var(--color-danger-focus-outline);
}

.ws-btn-outline-warning {
    color: var(--color-warning-bg);
    background-color: transparent;
    border: 1px solid var(--color-warning-bg);
}

.ws-btn-outline-warning:hover,
.ws-btn-outline-warning:focus {
    color: var(--color-warning-text);
    background-color: var(--color-warning-bg);
    border-color: var(--color-warning-bg);
}

.ws-btn-outline-warning:active,
.ws-btn-outline-warning:focus {
    outline: 3px solid var(--color-warning-focus-outline);
}

.ws-btn-outline-info {
    color: var(--color-info-bg);
    background-color: transparent;
    border: 1px solid var(--color-info-bg);
}

.ws-btn-outline-info:hover,
.ws-btn-outline-info:focus {
    color: var(--color-info-text);
    background-color: var(--color-info-bg);
    border-color: var(--color-info-bg);
}

.ws-btn-outline-info:active,
.ws-btn-outline-info:focus {
    outline: 3px solid var(--color-info-focus-outline);
}

.ws-btn-outline-dark {
    color: var(--color-dark-text);
    background-color: transparent;
    border: 1px solid var(--color-dark-text);
}

.ws-btn-outline-dark:hover,
.ws-btn-outline-dark:focus {
    color: var(--color-dark-text);
    background-color: var(--color-dark-bg);
    border-color: var(--color-dark-text);
}

.ws-btn-outline-dark:active,
.ws-btn-outline-dark:focus {
    outline: 3px solid var(--color-dark-focus-outline);
}

.ws-btn-outline-light {
    color: var(--color-light-text);
    background-color: transparent;
    border: 1px solid var(--color-light-bg);
}

.ws-btn-outline-light:hover,
.ws-btn-outline-light:focus {
    color: var(--color-light-text-hover);
    background-color: var(--color-light-bg);
    border-color: var(--color-light-bg);
}

.ws-btn-outline-light:active,
.ws-btn-outline-light:focus {
    outline: 3px solid var(--color-light-focus-outline);
}

.ws-btn-outline-link {
    color: var(--color-link-text);
    background-color: transparent;
    border: 1px solid transparent;
}

.ws-btn-outline-link:hover,
.ws-btn-outline-link:focus {
    color: var(--color-link-hover);
    background-color: transparent;
    border-color: transparent;
}

.ws-btn-outline-link:active,
.ws-btn-outline-link:focus {
    outline: 3px solid var(--color-link-focus-outline);
}