skills > header {
    layout = "center",
    line_height = 22,
    height = 20,
    width = 200,
}

skills > header > @text {
    font_size = 20,
    font_color = rgb(0, 0, 0),
    width = 45,
    height = 25,
}

skills > seperator {
    background_color = rgba(0, 0, 0, 0.6),
    width = 300,
    height = 1,
}

skills > skill {
    width = 300,
    height = 50,
    image = "ui/rating_bar",
    layout = "center",
}

skills > skill > skill_clip(value=value) {
    clip_overflow = true,
    height = 50,
    width = 300.0 * value,
    align_width = false,
}

skills > skill > skill_clip > skill_bar {
    width = 300,
    height = 50,
    image = "ui/rating_bar_color",
}

skills > skill > label {
    layout = "lined",
    width = 200,
    y = 8,
    align_height = false,
    line_height = 26,
}

skills > skill > label > @text {
    font_size = 24,
    font_color = rgb(0, 0, 0),
}

skills > skill(tooltip="*") {
    height = 16,
    image = "solid",
}

skills > skill(tooltip="*") > skill_clip(value=value) {
    height = 16,
}

skills > skill(tooltip="*") > skill_clip > skill_bar {
    height = 16,
    image = "solid",
    tint = rgb(255, 0, 0),
}

skills > skill(tooltip="*") > label {
    y = 0,
    line_height = 16,
}

skills > skill(tooltip="*") > label > @text {
    font_size = 16,
    font_color = rgb(0, 0, 0),
}


skills > skill(key=key, tooltip=tooltip, title=title) {
    can_hover = true,
    on_mouse_move = "init#return true",
    on_mouse_move_over = "ui.tooltip#
        local key = node:get_property_string('key')
        local tooltip = node:get_property_string('tooltip')
        local title = node:get_property_string('title')

        local content = ui.new('content')
        local title_node = ui.new_text(title .. '\\n')
        title_node:set_property_bool('title', true)
        content:add_child(title_node)
        add_text(content, tooltip)

        ui.show_tooltip(key, content, evt.x, evt.y)
        return true
    ",
    on_mouse_move_out = "init#
        local key = node:get_property_string('key')
        ui.hide_tooltip(key)
        return true
    ",
    on_mouse_move = "init#
        local key = node:get_property_string('key')
        ui.move_tooltip(key, evt.x, evt.y)
        return true
    ",
}