#label-table td.name {
    /* Some label names are long and would normally stretch the label
     list really wide. Make them word wrap after a certain point. */
    max-width: 200px;
    /* And there are a few names where there aren't enough word breaks to
     word wrap. Force these to wrap on any character as necessary. */
    overflow-wrap: break-word;
}

.label-add-box, .label-remove-box,
.labelset-select-box, .labelset-label-name-box {
    float: left;
    margin: 3px;
}

.add-remove-button, .detail-button {
    /* table-cell instead of inline-block prevents HTML whitespace from
     displaying as a gap between the two elements. */
    display: table-cell;

    padding: 3px 5px;
    border: 2px solid black;

    background-color: hsl(0, 0%, 85%);
    cursor: pointer;
}

.add-remove-button {
    text-align: center;
    width: 40px;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    /* There seems to be no way to collapse the side borders of the
    two buttons, so we'll just remove one of those borders... */
    border-right: none;
}
.add-remove-button:hover {
    background-color: hsl(0, 0%, 95%);
}
.add-remove-button.disabled {
    background-color: hsl(0, 0%, 70%);
    cursor: default;
}

.detail-button {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}
.detail-button:hover {
    background-color: hsl(0, 0%, 95%);
}
.detail-button .label-name {
    display: inline-block;
    text-align: center;
    /* On long label names, the button might get stretched beyond this width.
    This shouldn't be a big deal though; it just means the row that
    button is on won't line up nicely with the other rows. */
    min-width: 110px;
    /* Just don't let it go multiline. */
    white-space: nowrap;
}


.labelset-select-box .select-button {
    padding: 3px;
    border: 2px solid black;
    border-radius: 10px;

    text-align: center;
    min-width: 160px;
    white-space: nowrap;

    background-color: hsl(0, 0%, 85%);
    cursor: pointer;
}
.labelset-select-box .select-button:hover {
    background-color: hsl(0, 0%, 95%);
}
.labelset-select-box.selected .select-button {
    background-color: hsl(0, 0%, 95%);
}

.labelset-label-name-box .label-name {
    padding: 2px;
    border: 2px solid black;
    border-radius: 10px;

    font-size: 0.9em;
    text-align: center;
    min-width: 100px;
    white-space: nowrap;

    background-color: hsl(0, 0%, 70%);
}


.label-status-image {
    /* Align better with text on the same line */
    vertical-align: middle;
}


/* Popularity bars. */
.meter {
    display: inline-block;
    width: 50px;
    height: 12px;
    border: 2px solid hsl(0, 0%, 40%);

    /* Align better with text on the same line */
    vertical-align: middle;
}
.meter.short {
    width: 25px;
}
.meter > span {
    /* Width will be set inline, e.g. 25% popularity = 25% width. */
    display: block;
    height: 100%;
}
.meter > span.green {
    background-color: hsl(120, 60%, 50%);
}
.meter > span.red {
    background-color: hsl(0, 60%, 60%);
}


/* Label detail page */
div.label-basic-info-and-thumbnail-wrapper {
    display: flex;
}

div.label-basic-info {
    max-width: 400px;
    margin-right: 30px;
}

img.label-thumbnail {
    /* Depending on container rules, the image might get stretched out of
     aspect ratio unless we specify size explicitly. */
    width: 150px;
    height: 150px;
}

div#patches-container {
    margin: 0.5em 0;
}
