phonolo.css

.phonolo {
    box-sizing: border-box;
    font-family: 'Segoe UI', 'Doulos SIL', 'Times New Roman', 'Arial', 'Courier New', 'Segoe UI', sans-serif;
    --phonolo-active-color: rgb(0, 218, 218);
    --phonolo-edit-color: rgb(255, 0, 0);
}

.phonolo, .phonolo-popup {
    font-size: max(1em, 16px);
}

.phonolo * {
    box-sizing: inherit;
}

.phonolo-interact:hover, .phonolo .phonolo-active {
    cursor: pointer;
    color: var(--phonolo-active-color);
    border-color: var(--phonolo-active-color);
}

.phonolo-edit:hover {
    cursor: pointer;
    color: var(--phonolo-edit-color);
}

svg .phonolo-interact:hover {
    fill: var(--phonolo-active-color);
}

.phonolo-popup {
    z-index: 5000 !important;
    position: fixed !important;
    border: 1px solid black !important;
    background-color: white !important;
    padding: 10px !important;

    max-height: max-content !important;
    min-height: unset !important;
}

.phonolo-drag {
    position: fixed !important;
    z-index: 9999 !important;
    cursor: grabbing !important;
}

.phonolo-droppable.phonolo-hovering {
    background-color: rgb(109, 255, 170);
}

.phonolo-segment {
    /* font-family: 'Doulos SIL', 'Times New Roman', 'Arial', 'Courier New', 'Segoe UI', sans-serif; */
    font-size: 1em;
}

.phonolo-phonegrid {
    display: grid;
    grid-template-columns: max-content 1fr;
    grid-template-rows: 1fr;
    grid-template-areas:
        "symbol name";
    column-gap: 10px;
    margin-bottom: 10px;
}

.phonolo-phonegrid .phonolo-symbol {
    grid-area: symbol;
    height: 50px;
    width: 50px;
    display: flex;
    font-size: 2.4em;
    align-items: center;
    justify-content: center;
    place-self: center;
}

.phonolo-phonegrid .phonolo-name {
    grid-area: name;
    font-size: 1em;
    width: min-content;
}

.phonolo-featurebundle {
    display: flex;
    justify-content: center;
    font-size: 1em;
    gap: 2px;
    min-height: 20px;
}

.phonolo-features {
    border: 0;
    border-spacing: 0;
}

.phonolo-features .phonolo-feature-value {
    text-align: right;
}

.phonolo-features .phonolo-feature-feature {
    text-align: left;
}

.phonolo-bracket-left, .phonolo-bracket-right {
    width: 10px;
    border: 2px solid black;
}

.phonolo-bracket-left {
    border-right: 0;
}

.phonolo-bracket-right {
    border-left: 0;
}


.phonolo-rule {
    display: flex;
    width: max-content;
    align-items: center;

    gap: 5px;

    font-size: 1em;
}

.phonolo-rule .phonolo-segment {
    font-size: 1em;
}

.phonolo-rule .phonolo-rule-arrow {
    font-size: 1.6em;
}

.phonolo-rule .phonolo-rule-slash {
    /* margin-inline: 5px; */
    font-size: 1.4em;
}

.phonolo-rule .phonolo-rule-underscore {
    border-bottom: 0.1em solid black;
    height: 1em;
    width: 1.4em;
}

.phonolo-naturalclass {
    width: min-content;
    /* font-size: 1em; */
}

.phonolo-naturalclass .phonolo-naturalclass-header {
    width: max-content;
    margin-bottom: 5px;
    font-size: 1.2em;
}

.phonolo-naturalclass .phonolo-naturalclass-segments {
    width: 100%;
}

table.phonolo-consonants {
    font-size: 1em;
    table-layout: fixed;
    border-collapse: collapse;
    border: 1px solid black;
}

table.phonolo-consonants th, table.phonolo-consonants td {
    border: 1px solid black;
}

table.phonolo-consonants td {
    background-color: #f8f9fa;
}

table.phonolo-consonants th {
    font-weight: normal;
    padding: 5px;
    background-color: #eaecf0;
}

table.phonolo-consonants .phonolo-consonants-consonant {
    display: flex;
    justify-content: space-evenly;
    gap: 5px;
}

.phonolo-vowels {
    min-width: 250px;
}

.phonolo-vowels .phonolo-segment {
    font-size: 0.75em;
}