/* These styles are generated from project.scss. */

.alert-debug {
    color: black;
    background-color: white;
    border-color: #d6e9c6;
}

.alert-error {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

/* Autocomplete component styles */
.error-message {
    margin-top: 2px;
    min-height: 26px;
    display: block;
}

.error-message.hidden {
    display: none;
}

.error-message .bg-red-100 {
    background-color: #fff5f5;
    border-color: #fc8181;
    color: #c53030;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    border-width: 1px;
    border-style: solid;
}

/* Status indicators */
.status-cell i.fa-check {
    color: #48bb78;
    /* green-500 */
}

.status-cell i.fa-times {
    color: #f56565;
    /* red-500 */
}

/* Dropdown styling */
[data-autocomplete-dropdown] {
    background-color: white;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border-radius: 0.375rem;
    overflow: hidden;
    z-index: 50;
}

[data-autocomplete-dropdown] ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    max-height: 15rem;
    overflow-y: auto;
}

[data-autocomplete-dropdown] li {
    cursor: pointer;
}

[data-autocomplete-dropdown] li:hover {
    background-color: #f7fafc;
    /* gray-100 */
}

/* Input focus styling */
input:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5);
    border-color: #63b3ed;
}

/* Button hover/focus effects */
button:hover {
    opacity: 0.9;
}

button:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(66, 153, 225, 0.5);
}

/* Table styles for the bulk add aliases page */
.bulk-table td,
.bulk-table th {
    padding: 0.5rem 0.75rem;
    vertical-align: top;
}

.product-cell {
    vertical-align: top;
}

/* Responsive adjustments */
@media (max-width: 640px) {

    .bulk-table th,
    .bulk-table td {
        padding: 0.25rem 0.5rem;
    }

    button.text-sm {
        font-size: 0.75rem;
    }
}