content(style="course_edit_period") {
    layout = "center",
}


window(key="course_edit_period") > darken_ui {
    width = parent_width,
    height = parent_height,
    can_hover = true,

    on_mouse_move = "init#return true",
    on_mouse_move_over = "init#return true",
    on_mouse_move_out = "init#return true",
    on_mouse_up = "init#return true",
    on_mouse_down = "init#return true",

    background_color = rgba(0, 0, 0, 0.4),
}

content(style="course_edit_period") > lesson_details_window {
    align_height = false,
    align_width = false,

    width = 300,
    height = parent_height - 200,
    border_width = border_width(40.0),
    border = border_image("ui/window", 40.0, 40.0,  true),
    shadow = shadow(3.0, 3.0, rgba(0, 0, 0, 0.8), 5.0, 0.0, "outset"),
    tint=rgb(255, 220, 220),

    x = 600,
    y = 100,
}

lesson_details_window > lesson_details {
    x = 35,
    y = 25,

    width = parent_width - 50,
    layout = "lined",
    line_height = 26,
}

lesson_details_window > lesson_details > @text {
    font_size = 26,
}
lesson_details_window > lesson_details > @text(staff=true) {
    font_color = rgb(0, 255, 0),
    text_shadow = text_shadow(1.0, 1.0, "#000000", 1.0),
}
lesson_details_window > lesson_details > @text(room=true) {
    font_color = rgb(0, 0, 255),
    text_shadow = text_shadow(1.0, 1.0, "#000000", 1.0),
}

lesson_details_window > lesson_details > bullet_point {
    width = 25,
    height = 25,
    image = "ui/bullet_point",
    tint = rgb(0, 0, 40),
}

content(style="course_edit_period") > buttons {
    align_height = false,
    y = parent_height - 66,
    height  = 66,
    width = parent_width - 150,

    layout = "grid",
    columns = 1,
    spacing = 16,
    margin = 12,
}

content(style="course_edit_period") > buttons > button(id="save") {
    tint = rgb(20, 255, 120),
}

content(style="course_edit_period") > buttons > button(id="save", disabled=true) {
    tint = rgb(0.6, 0.6, 0.6),
}

content(style="course_edit_period") > label {
    layout = "lined",
    align_height = false,
    y = 65,
}
content(style="course_edit_period") > label > @text {
    font_size = 30,
}

content(style="course_edit_period") > dropdown(id="lesson") {
    width = parent_width - 80,
    height = 50,
    align_height = false,
    y = 100,
}

content(style="course_edit_period") > button(id="add_room") {
    align_height = false,
    y = parent_height - 110,
}

content(style="course_edit_period") > scroll_panel {
    width = parent_width - 80,
    height = parent_height - 280,
    align_height = false,
    y = 160,
}

content(style="course_edit_period") > scroll_panel > content {
    layout = "rows",
}

content(style="course_edit_period") > scroll_panel > content > period_room {
    background_color = rgba(0, 0, 0, 0.05),
    height = 100,

    border_width = border_width(2.0, 2.0),
    border = border(bside("#000000", "solid")),
}

period_room > room_selection {
    width = parent_width,
    height = 40,
}

period_room > room_selection > @text {
    x = 5,
    y = 4,
    font_size = 24,
}

period_room > room_selection > dropdown {
    width = parent_width - 100,
    height = 40,
    x = 100,
    y = 0,
}

period_room > room_selection > dropdown(valid=false) {
    background_color = rgb(255, 150, 0),
}

period_room > staff_selection {
    width = parent_width,
    height = 40,
    y = 40,
}

period_room > staff_selection > @text {
    x = 5,
    y = 4,
    font_size = 24,
}

period_room > staff_selection > dropdown {
    width = parent_width - 100,
    height = 40,
    x = 100,
    y = 0,
}

period_room > staff_selection > dropdown(valid=false) {
    background_color = rgb(255, 150, 0),
}

period_room > buttons {
    y = parent_height - 21,
    height = 20,
    width = parent_width,

    layout = "grid",
    columns = 2,
    margin = 1,
}

period_room > buttons > button(id="remove") {
    tint = rgb(255, 20, 50),
}