/* *********************************************** */
/* ************* Properties Component ************ */
/* *********************************************** */

/*!* Properties container *!*/
.mf-properties {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/*!* Group card - using DaisyUI card styling *!*/
.mf-properties-group-card {
    background-color: var(--color-base-100);
    border: 1px solid color-mix(in oklab, var(--color-base-content) 10%, transparent);
    border-radius: var(--radius-md);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    overflow: auto;
}

.mf-properties-group-container {
    display: inline-block; /* important */
    min-width: max-content; /* important */
    width: 100%;
}


/*!* Group header - gradient using DaisyUI primary color *!*/
.mf-properties-group-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, color-mix(in oklab, var(--color-primary) 80%, black) 100%);
    color: var(--color-primary-content);
    padding: calc(var(--properties-font-size) * 0.5) calc(var(--properties-font-size) * 0.75);
    font-weight: 700;
    font-size: var(--properties-font-size);
}

/*!* Group content area *!*/
.mf-properties-group-content {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

/*!* Property row *!*/
.mf-properties-row {
    display: grid;
    grid-template-columns: 6rem 1fr;

    align-items: center;
    padding: calc(var(--properties-font-size) * 0.4) calc(var(--properties-font-size) * 0.75);

    border-bottom: 1px solid color-mix(in oklab, var(--color-base-content) 5%, transparent);
    transition: background-color 0.15s ease;

    gap: calc(var(--properties-font-size) * 0.75);
}

.mf-properties-row:last-child {
    border-bottom: none;
}

.mf-properties-row:hover {
    background-color: color-mix(in oklab, var(--color-base-content) 3%, transparent);
}

/*!* Property key - normal font *!*/
.mf-properties-key {
    align-items: start;
    font-weight: 600;
    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
    flex: 0 0 40%;
    font-size: var(--properties-font-size);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/*!* Property value - monospace font *!*/
.mf-properties-value {
    font-family: var(--default-mono-font-family);
    color: var(--color-base-content);
    flex: 1;
    text-align: left;
    font-size: var(--properties-font-size);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}