.breakpoint-editor {
    margin: 20px 0;
    width: 100%;
}

.breakpoint-list {
    margin-bottom: 15px;
    width: 100%;
    border-collapse: collapse;
}

.breakpoint-list th,
.breakpoint-list td {
    padding: 8px;
    text-align: left;
}

.breakpoint-list th {
    font-weight: 500;
}

.breakpoint-list td {
    vertical-align: middle;
}

.breakpoint-list td:last-child {
    width: 50px;
    text-align: center;
}

.add-breakpoint-form {
    margin-top: 15px;
}

.add-breakpoint-form .input-group {
    display: flex;
    gap: 8px;
    align-items: center;
}

.add-breakpoint-form input {
    flex: 1;
    min-width: 80px;
}

/* Style the number input to look like a select */
.new-breakpoint-width {
    cursor: pointer;
    appearance: textfield;
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 16px 12px;
    padding-right: 2.5rem !important;
}