.pillbox {
    font-family: "Inter Tight";
    display: inline-flex;
    align-items: center;
    padding: 0.5em 1em;
    border-radius: 15px;
    font-size: 1em; /* Consistent decimal format */
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
    transition: background-color 1s ease, color 1s ease;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.pillbox-icon {
    display: inline-block;
    padding-right: 5px;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    filter: brightness(0) saturate(100%);
}

.pillbox.primary .pillbox-icon,
.pillbox.danger .pillbox-icon,
.pillbox.red .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(0deg) saturate(5) brightness(0.5);
}

.pillbox.primary:hover .pillbox-icon {
    filter: invert(1);
    transition: filter 1s ease;
}

.pillbox.secondary .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(200deg) saturate(5) brightness(0.5);
}

.pillbox.success .pillbox-icon,
.pillbox.green .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(90deg) saturate(5) brightness(0.5);
}

.pillbox.warning .pillbox-icon,
.pillbox.yellow .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(40deg) saturate(5) brightness(0.5);
}

.pillbox.info .pillbox-icon,
.pillbox.blue .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(180deg) saturate(5) brightness(0.5);
}

.pillbox.light .pillbox-icon,
.pillbox.dark .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(0deg) saturate(0) brightness(1);
}

.pillbox.violet .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(270deg) saturate(5) brightness(0.5);
}

.pillbox.orange .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(30deg) saturate(5) brightness(0.5);
}

.pillbox.pink .pillbox-icon {
    filter: brightness(0) saturate(100%) opacity(0.7) sepia(1) hue-rotate(300deg) saturate(5) brightness(0.5);
}

.pillbox:hover {
    background-color: currentColor;
    color: currentBackgroundColor;
}

.pillbox.primary {
    background-color: rgba(0, 0, 0, 0.1);
    color: #000000;
}

.pillbox.primary:hover {
    background-color: #000000;
    color: #ffffff; /* Consistent color format */
}

.pillbox.secondary {
    background-color: #6c757d;
    color: #ffffff;
}

.pillbox.secondary:hover {
    background-color: #ffffff;
    color: #6c757d;
}

.pillbox.success {
    background-color: rgba(43, 189, 142, 0.2);
    color: #2BBD8E;
}

.pillbox.success:hover {
    background-color: #2BBD8E;
    color: #ffffff;
}

.pillbox.danger {
    background-color: rgba(255, 69, 69, 0.2);
    color: #ff4545;
}

.pillbox.danger:hover {
    background-color: #ff4545;
    color: #ffffff;
}

.pillbox.warning {
    background-color: rgba(255, 145, 68, 0.2);
    color: #ff9144;
}

.pillbox.warning:hover {
    background-color: #ff9144;
    color: #ffffff;
}

.pillbox.info {
    background-color: rgba(69, 171, 245, 0.2);
    color: #45ABF5;
}

.pillbox.info:hover {
    background-color: #45ABF5;
    color: #ffffff;
}

.pillbox.light {
    background-color: #f8f9fa;
    color: #212529;
}

.pillbox.light:hover {
    background-color: #212529;
    color: #f8f9fa;
}

.pillbox.dark {
    background-color: #343a40;
    color: #ffffff;
}

.pillbox.dark:hover {
    background-color: #ffffff;
    color: #343a40;
}

.pillbox.blue {
    background-color: #007bff;
    color: #ffffff;
}

.pillbox.blue:hover {
    background-color: #0056b3;
    color: #ffffff;
}

.pillbox.green {
    background-color: #28a745;
    color: #ffffff;
}

.pillbox.green:hover {
    background-color: #218838;
    color: #ffffff;
}

.pillbox.yellow {
    background-color: #ffc107;
    color: #212529;
}

.pillbox.yellow:hover {
    background-color: #e0a800;
    color: #212529;
}

.pillbox.violet {
    background-color: #6f42c1;
    color: #ffffff;
}

.pillbox.violet:hover {
    background-color: #5a32a3;
    color: #ffffff;
}

.pillbox.red {
    background-color: #dc3545;
    color: #ffffff;
}

.pillbox.red:hover {
    background-color: #c82333;
    color: #ffffff;
}

.pillbox.orange {
    background-color: #fd7e14;
    color: #ffffff;
}

.pillbox.orange:hover {
    background-color: #e8590c;
    color: #ffffff;
}

.pillbox.pink {
    background-color: #e83e8c;
    color: #ffffff;
}

.pillbox.pink:hover {
    background-color: #d63384;
    color: #ffffff;
}

body.dark-mode .pillbox.blue {
    background-color: #0056b3;
    color: #ffffff;
}

body.dark-mode .pillbox.blue:hover {
    background-color: #007bff;
    color: #ffffff;
}

body.dark-mode .pillbox.green {
    background-color: #218838;
    color: #ffffff;
}

body.dark-mode .pillbox.green:hover {
    background-color: #28a745;
    color: #ffffff;
}

body.dark-mode .pillbox.yellow {
    background-color: #e0a800;
    color: #212529;
}

body.dark-mode .pillbox.yellow:hover {
    background-color: #ffc107;
    color: #212529;
}

body.dark-mode .pillbox.violet {
    background-color: #5a32a3;
    color: #ffffff;
}

body.dark-mode .pillbox.violet:hover {
    background-color: #6f42c1;
    color: #ffffff;
}

body.dark-mode .pillbox.red {
    background-color: #c82333;
    color: #ffffff;
}

body.dark-mode .pillbox.red:hover {
    background-color: #dc3545;
    color: #ffffff;
}

body.dark-mode .pillbox.orange {
    background-color: #e8590c;
    color: #ffffff;
}

body.dark-mode .pillbox.orange:hover {
    background-color: #fd7e14;
    color: #ffffff;
}

body.dark-mode .pillbox.pink {
    background-color: #d63384;
    color: #ffffff;
}

body.dark-mode .pillbox.pink:hover {
    background-color: #e83e8c;
    color: #ffffff;
}

body.dark-mode .pillbox.primary {
    background-color: #fafafa;
    color: #2c2c2c;
}

body.dark-mode .pillbox.primary:hover {
    background-color: #ffffff;
    color: #525252;
}

body.dark-mode .pillbox.secondary {
    background-color: #545b62;
    color: #2c2c2c;
}

body.dark-mode .pillbox.secondary:hover {
    background-color: #ffffff;
    color: #545b62;
}

body.dark-mode .pillbox.success {
    background-color: #2BBD8E;
    color: #2c2c2c;
}

body.dark-mode .pillbox.success:hover {
    background-color: #ffffff;
    color: #2BBD8E;
}

body.dark-mode .pillbox.danger {
    background-color: #ff4545;
    color: #2c2c2c; /* Consistent color format */
}

body.dark-mode .pillbox.danger:hover {
    background-color: #ffffff; /* Consistent color format */
    color: #ff4545;
}

body.dark-mode .pillbox.warning {
    background-color: #ffb366;
    color: #2c2c2c; /* Consistent color format */
}

body.dark-mode .pillbox.warning:hover {
    background-color: #ffffff; /* Consistent color format */
    color: #ffb366;
}

body.dark-mode .pillbox.info {
    background-color: #117a8b;
    color: #2c2c2c; /* Consistent color format */
}

body.dark-mode .pillbox.info:hover {
    background-color: #ffffff; /* Consistent color format */
    color: #117a8b;
}

body.dark-mode .pillbox.light {
    background-color: #e2e6ea;
    color: #343a40;
}

body.dark-mode .pillbox.light:hover {
    background-color: #343a40;
    color: #e2e6ea;
}

body.dark-mode .pillbox.dark {
    background-color: #1d2124;
    color: #ffffff;
}

body.dark-mode .pillbox.dark:hover {
    background-color: #ffffff;
    color: #1d2124;
}

@media screen and (max-width: 768px) {
    .pillbox {
        font-size: 1em;
        padding: 0.4em 0.8em;
        margin-bottom: 10px; /* Ensure vertical gap on smaller screens as well */
    }
}