/* Buttons */
.btn.btn-sm-padding {
    padding: 2px 4px !important; /* Slightly more padding for a comfortable feel */
    margin: 1px;
    border-radius: 4px !important; /* Small rounding for a modern look */
    border: none; /* Remove border for a cleaner appearance */
    font-weight: 500; /* Medium font weight for readability */
    color: #FFFFFF; /* White text for contrast */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    transition: background-color 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for hover effects */
    cursor: pointer; /* Pointer cursor to indicate interactivity */
}

.btn-dark {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-dark:hover {
    background-color: var(--btn-color-hover) !important;
    border-color: var(--btn-color-hover) !important;
}

.btn-disabled {
    pointer-events: none;
}

.btn-gray {
    background-color: var(--gray-color) !important;
    border-color: var(--gray-color) !important;
}

.btn-success {
    background-color: var(--success-color) !important;
    border-color: var(--success-color) !important;
}

.btn-success:hover {
    background-color: var(--success-color-darker) !important;
    border-color: var(--success-color-darker) !important;
}

.btn-danger {
    background-color: var(--danger-color) !important;
    border-color: var(--danger-color) !important;
}

.btn-danger:hover {
    background-color: var(--danger-color-darker) !important;
    border-color: var(--danger-color-darker) !important;
}

/* Blinking */
@keyframes blinker {
    0%, 100% {
        box-shadow: none;
    }
    50% {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.6); /* Customize this shadow to fit your design */
    }
}
  
.btn-blink {
    animation: blinker 1s linear infinite;
}

/* Running */
@keyframes gradient-animation {
    0% {
        background-position: right;
    }

    100% {
        background-position: left;
    }
}

.btn-running {
    background: linear-gradient(to left, var(--primary-color) 30%, var(--primary-color-darker) 50%, var(--primary-color) 70%);
    background-size: 200% 100%;
    animation: gradient-animation 2s linear infinite;
    color: rgb(255, 255, 255);
    /* Adjust text color for visibility */
    border: none;
    /* Optional: remove border for a smoother appearance */
    pointer-events: none;
    /* Optional: disable pointer events to prevent user interaction */
}

/* Disable the pointer event on font awesome icon inside button tag to ensure that the click event propagates to the button behind it. */
button > .fa {
    pointer-events: none;
}

.icon-button {
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    color: inherit;
}

/* Links */
a {
    color: var(--a-color) !important;
}

a:hover {
    color: var(--a-color-hover)  !important;
}

a:visited {
    color: var(--a-color-visited) !important;
}