/* style.css: BYU IT&C 210a Boilerplate Stylesheet */

/* Material Icons */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

:root {
	/* Custom theme colors */
	--primary: #007bff;
	--accent: #0056b3;
	--delete: #dc3545;
	--primary-text: #ffffff;

	/* Window background and default font */
	background-color: #f4f6f9;
	font-family: Verdana, Geneva, Tahoma, sans-serif;
}

/* Page */
body {
    max-width: 55rem;
    margin: 0.5em auto;
    border: 1px solid black;
    border-radius: 5px;
    padding: 0.75rem;
    background-color: #f4f6f9;
}

/* Page title */
h1 {
	font-family: "Arial Black", Arial, sans-serif;
	font-weight: bolder;
}

/* Navigation bar */
nav {
    color: white;
    background-color: var(--accent);
    padding: 0.75rem;
}

nav a {
    color: lightgray;
    text-decoration: none;
}

/* Task list */
.tasklist {
	padding-left: 0;
	list-style-type: none;
}

/* Individual tasks */
.task {
	display: block;
	width: 100%;
	box-sizing: border-box;

	/* Customization: colored border */
	border: 2px solid var(--accent);
	padding: 10px;
	margin-bottom: 10px;
}

/* Task checkbox */
.task-done {
	display: inline-block;
	box-sizing: border-box;

	/* Custom checkbox color */
	color: var(--primary);
}

/* Completed checkbox */
.task-done:checked {
	color: green;
}

/* Task description */
.task-description {
	display: inline-block;
	width: calc(100% - 12em);
	box-sizing: border-box;
}

/* Task date */
.task-date {
	display: inline-block;
	width: 6em;
}

/* Delete button */
.task-delete {
	display: inline-block;
	box-sizing: border-box;

	/* Custom delete color */
	color: var(--delete);
}

/* Material Icons */
.material-icon {
	border: none;
	background: none;
	font-family: 'Material Icons';
	font-size: inherit;
	cursor: pointer;
}

/* Custom example */
.example {
	color: var(--primary-text);
}

/* Create Task button */
.form-button {
	background-color: var(--primary);
	color: white;
	border: none;
	padding: 10px 16px;
	font-weight: bold;
	border-radius: 4px;
	cursor: pointer;
}

/* Task description input */
.form-description {
	width: 100%;
	box-sizing: border-box;
	padding: 8px;
	margin-bottom: 10px;
}

/* Completed task */
.task-done-text {
	text-decoration: line-through;
	color: #6c757d;
}


/* ===== checkbox-icon =============== */

input.checkbox-icon {
	font-family: 'Material Icons';
    font-size: inherit;
	appearance: none;
	cursor: pointer;
}

input.checkbox-icon:before {
	content: 'check_box_outline_blank';
}

input.checkbox-icon:checked:before {
	content: 'check_box';
}


/* ===== toggle-switch =============== */

input.toggle-switch {
	vertical-align: middle;
    font-size: 1em;
	appearance: none;
	position: relative;
	cursor: pointer;
	margin: 0em 0.2em;
    width: 1.4em;
    height: 0.8em;
}

input.toggle-switch:after {
    vertical-align: middle;
	content: '';
	display: inline-block;
    position: absolute;
	width: 1.4em;
	height: 0.6em;
	background-color: rgb(128,128,128);
	border-radius: 0.3em;
}

input.toggle-switch:before {
    vertical-align: middle;
	content: '';
	display: inline-block;
	position: absolute;
	width: 0.7em;
	height: 0.7em;
    z-index: 1;
	left: 0;
    top: -0.1em;
	border: 1px solid rgb(128,128,128);
	border-radius: 0.6em;
	background-color: white;
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
	transition-duration: 0.3s;
}

input.toggle-switch:checked:before {
	left: 0.7em;
	box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6);
}

input.toggle-switch:checked:after {
	background-color: #16a085;
}

/* design for phones */
@media (max-width: 600px) {
    body {
        margin: 0;
        padding: 0.5rem;
        border: none;
        border-radius: 0;
    }

    h1 {
        font-size: 2rem;
    }

    .task {
        padding: 8px;
    }

    .task-description {
        width: calc(100% - 3em);
    }

    .task-date {
        display: block;
        width: 100%;
        margin-top: 5px;
        margin-left: 2em;
    }

    .task-delete {
        float: right;
    }

    .form-description,
    .form-date {
        width: 100%;
    }

    .form-button {
        width: 100%;
    }
}