tutorial_popup {
    x = parent_width - 416,
    y = parent_height - 356,
    width = 400,
    height = 240,
    border_width = border_width(32.0),
    border = border_image("ui/sticky_large", 32, 32,  true),
    shadow = shadow(2.0, 2.0, rgba(0, 0, 0, 0.3), 3.0, 0.0, "outset"),
}

tutorial_popup > title {
    layout = "lined",
    line_height = 30,
    width = parent_width - 16,
    y = 4,
    x = 8,
}

tutorial_popup > title > @text {
    font_size = 27,
    font_color = rgb(0, 0, 0),
}

tutorial_popup > content {
    layout = "lined",
    line_height = 23,
    width = parent_width - 16,
    y = 32,
    x = 8,
}

tutorial_popup > content > @text {
    font_size = 20,
    font_color = rgb(0, 0, 0),
}
tutorial_popup > content > @text(title=true) {
    font_color = rgb(255, 255, 0),
    font_size = 23,
}
tutorial_popup > content > @text(highlight=true) {
    font_color = rgb(0, 200, 0),
    text_shadow = text_shadow(1.0, 1.0, "#000000", 1.0),
}
tutorial_popup > content > @text(special=true) {
    font_color = rgb(255, 0, 255),
    text_shadow = text_shadow(1.0, 1.0, "#000000", 1.0),
}
tutorial_popup > content > @text(negative=true) {
    font_color = rgb(255, 0, 0),
}
tutorial_popup > content > icon(img=img) {
    image = img,
    width = 20,
    height = 20,
}

tutorial_arrow {
    x = 0,
    y = 0,
    image = "ui/tutorial/arrow_down",
    width = 48,
    height = 48,
}

tutorial_arrow(offset_y=offset_y) {
    y = offset_y,
    align_height = false,
}
tutorial_arrow(offset_y=offset_y, ani_y=ani_y) {
    y = offset_y + ani_y,
}

tutorial_arrow(offset_x=offset_x) {
    x = offset_x,
    align_width = false,
}
tutorial_arrow(offset_x=offset_x, ani_x=ani_x) {
    x = offset_x + ani_x,
}

tutorial_arrow(animated=ani) {
    on_update = "init#
        local dir = node:get_property_string('animated')
        local time = node:get_property_float('$time') or 0.0
        time = time + evt.delta
        node:set_property_float('$time', time)
        node:set_property_float('ani_' .. dir, 4 * math.sin(time * 0.05))
    ",
}