options_list {
    x = 150,
    y = 50,
    height = parent_height - 200,
    width = parent_width - 300,
    background_color = rgba(0, 0, 0, 0.25),
    shadow = shadow(0.0, 0.0, rgba(0, 0, 0, 0.6), 16.0, 1.0, "outset"),
}

options_list > scroll_panel {
    width = parent_width,
    height = parent_height,
}

options_list > scroll_panel > content {
    layout = "rows",
}

option {
    layout = "grid",
    height = 60,
    columns = 2,
    margin = 10,
    spacing = 50,
}

option(is_key=true) {
    columns = 3,
    margin = 10,
    spacing = 50,
}

option > label_center {
    layout = "center",
    background_color = rgba(0, 0, 0, 0.3),
    shadow = shadow(0.0, 0.0, rgba(0, 0, 0, 0.6), 5.0, 1.0, "outset"),
}

option > label_center(key=key, tooltip=tooltip) {
    can_hover = true,
    on_mouse_move_over = "ui.tooltip#
        local key = node:get_property_string('key')
        local tooltip = node:get_property_string('tooltip')

        local content = ui.new('content')
        add_text(content, tooltip)

        ui.show_tooltip(key, content, evt.x, evt.y)
    ",
    on_mouse_move_out = "init#
        local key = node:get_property_string('key')
        ui.hide_tooltip(key)
    ",
    on_mouse_move = "init#
        local key = node:get_property_string('key')
        ui.move_tooltip(key, evt.x, evt.y)
    ",
}
option > colour_display(colour=colour) {
    background_color = colour,
}

option > label_center > label {
    layout = "lined",
    line_height = 30,
    width = parent_width,
}

option > label_center > label > @text {
    font_size = 28,
    font_color = "#FFFFFF",
    text_shadow = text_shadow(2.0, 2.0, "#000000", 2.0),
}
option > label_center > label > @text(colour=colour) {
    font_color = colour,
}

opt_header {
    layout = "grid",
    height = 30,
    columns = 3,
}

opt_header > cell {
    layout = "center",
}

opt_header > cell > line {
    height = 2,
    width = parent_width,
    border_width = border_width(0.0, 2.0, 0.0, 0.0),
    border = border(bside("#FAFFBF", "dotted")),
}

opt_header > cell_text {
    layout = "center",
    background_color = rgba(250, 255, 191, 0.1),
    shadow = shadow(0.0, 0.0, rgba(250, 255, 191, 0.2), 5.0, 1.0, "outset"),
}

opt_header > cell_text > header {
    layout = "lined",
    line_height = 30,
    width = parent_width,
}

opt_header > cell_text > header > @text {
    font_size = 28,
    font_color = "#FAFFBF",
    text_shadow = text_shadow(2.0, 2.0, "#000000", 2.0),
}

opt_sub_header {
    layout = "grid",
    height = 25,
    columns = 3,
}

opt_sub_header > cell {
    layout = "center",
}

opt_sub_header > cell > line {
    height = 2,
    width = parent_width,
    border_width = border_width(0.0, 2.0, 0.0, 0.0),
    border = border(bside("#F2D4D0", "dotted")),
}

opt_sub_header > cell_text {
    layout = "center",
    background_color = rgba(242, 212, 208, 0.1),
    shadow = shadow(0.0, 0.0, rgba(242, 212, 208, 0.2), 5.0, 1.0, "outset"),
}

opt_sub_header > cell_text > header {
    layout = "lined",
    line_height = 25,
    width = parent_width,
}

opt_sub_header > cell_text > header > @text {
    font_size = 23,
    font_color = "#F2D4D0",
    text_shadow = text_shadow(2.0, 2.0, "#000000", 2.0),
}

option > button(unset=true) {
    border = border_image("ui/button_tint", 15, 15, true),
    tint = rgb(0.6, 0.6, 0.6),
}