/**
 * Project Sidewalk API Documentation - Label Types Component Styles
 *
 * This stylesheet contains styles specific to the Label Types component and works in conjunction with the main
 * api-docs.css file.
 */

/* ==========================================================================
  COMPONENT CONTAINERS
  ========================================================================== */

#label-types-preview {
    margin: var(--space-lg) 0;
    max-width: 1000px;
    width: 100%;
}

/* ==========================================================================
    COMPONENT TABLES
    ========================================================================== */

/* Label Types Table - component-specific customizations */
.label-types-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: var(--space-lg) 0;
    font-size: var(--font-size-sm);
}

.label-types-table th:not(:last-child),
.label-types-table td:not(:last-child) {
    padding-right: 6px; /* Add spacing between columns */
}

.label-types-table th {
    background-color: rgb(245, 245, 245);
    font-weight: bold;
    text-align: left;
}

.label-types-table th, .label-types-table td {
    text-align: left;
    padding: 12px 16px;
    border-bottom: 1px solid rgb(238, 238, 238);
}

/* ==========================================================================
    TABLE CONTENT ELEMENTS
    ========================================================================== */

/* Label Name */
.label-name {
    font-weight: 600;
}

/* Label Description */
.label-description {
    color: var(--color-text-secondary);
    max-width: 250px;
}

/* ==========================================================================
    COLOR VISUALIZATION ELEMENTS
    ========================================================================== */

/* Color Preview wrapper */
.color-preview-wrapper {
    display: flex;
    align-items: center;
}

/* Color Swatch */
.color-swatch {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: var(--space-xs);
    border: 1px solid var(--color-border-light);
}

/* Color Cell */
.color-cell {
    position: relative;
    padding: 12px 16px;
    color: #fff;
    text-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
}

/* Light-colored cells use dark text for contrast */
.light-color {
    color: var(--color-text-primary);
    text-shadow: 0px 0px 2px rgba(255, 255, 255, 0.7);
}