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

/* We use the Material Icons font in some of the styles. This brings in
the corresponding fonts from Google Fonts. */
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

/* The root rule is the foundation for the whole page. These settings _cascade_
to all elements unless they are overridden. */
:root {
	/* Change these variables according to your theme */
	--primary: var(--md-sys-color-on-primary);
	--accent: var(--md-sys-color-secondary);
	--delete: #ffffff;
	--primary-text: var(--md-sys-color-on-primary);

	/* Window background and default font */
    background-color: var(--md-sys-color-primary);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.dark {
  --md-sys-color-primary: rgb(128 213 210);
  --md-sys-color-surface-tint: rgb(128 213 210);
  --md-sys-color-on-primary: rgb(0 55 54);
  --md-sys-color-primary-container: rgb(0 80 79);
  --md-sys-color-on-primary-container: rgb(156 241 239);
  --md-sys-color-secondary: rgb(176 204 202);
  --md-sys-color-on-secondary: rgb(27 53 52);
  --md-sys-color-secondary-container: rgb(50 75 74);
  --md-sys-color-on-secondary-container: rgb(204 232 230);
  --md-sys-color-tertiary: rgb(178 200 232);
  --md-sys-color-on-tertiary: rgb(27 50 75);
  --md-sys-color-tertiary-container: rgb(50 72 99);
  --md-sys-color-on-tertiary-container: rgb(210 228 255);
  --md-sys-color-error: rgb(255 180 171);
  --md-sys-color-on-error: rgb(105 0 5);
  --md-sys-color-error-container: rgb(147 0 10);
  --md-sys-color-on-error-container: rgb(255 218 214);
  --md-sys-color-background: rgb(14 21 20);
  --md-sys-color-on-background: rgb(221 228 227);
  --md-sys-color-surface: rgb(14 21 20);
  --md-sys-color-on-surface: rgb(221 228 227);
  --md-sys-color-surface-variant: rgb(63 73 72);
  --md-sys-color-on-surface-variant: rgb(190 201 199);
  --md-sys-color-outline: rgb(136 147 146);
  --md-sys-color-outline-variant: rgb(63 73 72);
  --md-sys-color-shadow: rgb(0 0 0);
  --md-sys-color-scrim: rgb(0 0 0);
  --md-sys-color-inverse-surface: rgb(221 228 227);
  --md-sys-color-inverse-on-surface: rgb(43 50 49);
  --md-sys-color-inverse-primary: rgb(0 106 104);
  --md-sys-color-primary-fixed: rgb(156 241 239);
  --md-sys-color-on-primary-fixed: rgb(0 32 31);
  --md-sys-color-primary-fixed-dim: rgb(128 213 210);
  --md-sys-color-on-primary-fixed-variant: rgb(0 80 79);
  --md-sys-color-secondary-fixed: rgb(204 232 230);
  --md-sys-color-on-secondary-fixed: rgb(5 31 31);
  --md-sys-color-secondary-fixed-dim: rgb(176 204 202);
  --md-sys-color-on-secondary-fixed-variant: rgb(50 75 74);
  --md-sys-color-tertiary-fixed: rgb(210 228 255);
  --md-sys-color-on-tertiary-fixed: rgb(3 28 53);
  --md-sys-color-tertiary-fixed-dim: rgb(178 200 232);
  --md-sys-color-on-tertiary-fixed-variant: rgb(50 72 99);
  --md-sys-color-surface-dim: rgb(14 21 20);
  --md-sys-color-surface-bright: rgb(52 58 58);
  --md-sys-color-surface-container-lowest: rgb(9 15 15);
  --md-sys-color-surface-container-low: rgb(22 29 28);
  --md-sys-color-surface-container: rgb(26 33 32);
  --md-sys-color-surface-container-high: rgb(37 43 43);
  --md-sys-color-surface-container-highest: rgb(47 54 54);
}

/* These rules with element selectors apply to all elements of the corresonding names. In a sense, they
are automatically applied */

body {
    max-width: 55rem;			  /* Keeps the page from overflowing on wide monitors */
    margin: 0.5em auto;		      /* 0.5em is top and bottom margin. 'auto' for left and right centers the body on the page */
    border: 1px solid black;	/* Surround the content with a solid black border */
    border-radius: 5px;			  /* Round the corners of the body section */
    padding: 0.75rem;			  /* Padding goes between the borders and the internal content */
    background-color: var(--md-sys-color-tertiary);	/* Contrast the body background from the page background */
}

h1 {
	font-family: Georgia, 'Times New Roman', Times, serif;
	font-weight: bolder;
}

nav {
    color: var(--md-sys-color-on-primary);				/* Nav bar is white on very dark gray */
    background-color: var(--md-sys-color-secondary);
    padding: 0.75rem;			  /* Give the nav bar some internal padding */
}

nav a {
    background-color: var(--md-sys-color-secondary);	/* Links in the nav bar are light blue instead of white */
	color: var(--md-sys-color-on-primary);
    text-decoration: none;		  /* Don't underline links in the nav bar */
}

/* These with class selectors take effect when you apply the corresponding class name on an element */

.tasklist {
	padding-left: 0;		/* Remove padding that <ul> has by default */
	list-style-type: none;	/* No bullets in the list */
}

.task {
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.task-done {
	display: inline-block;
	box-sizing: border-box;
	/* Add property to change checkbox icon color */
}

.task-description {
	display: inline-block;
	width: calc(100% - 18em);
	box-sizing: border-box;
	color: var(--md-sys-color-on-primary);
}

.task-date {
	display: inline-block;
	width: 10em;
}

.task-delete {
	display: inline-block;
	box-sizing: border-box;
	width: 6em;

	/* Add property to change delete icon color */
}

.material-icon {
	border: none; /* No border */
	background: none; /* Match the background of the parent */
	font-family: 'Material Icons'; /* Use the icon font */
	font-size: inherit; /* Input doesn't automatically inherit font size. This brings it in. */
	cursor: pointer; /* Change the cursor to a pointer when hovering on this element */
	color: red;
}

/* Add your custom class rules here */

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

/* Add rule for: */
/* "Create Task" button border, background, and text */

/* ===== checkbox-icon =============== */
/* These three rules apply the checkbox icon from the Material Icons font to a checkbox */

input.checkbox-icon {
	font-family: 'Material Icons';
    font-size: "inherit";  /* Input doesn't automatically inherit font size. This brings it in. */
	appearance: none;    /* Hide the existing checkbox so that the new rendering will overlay it */
	cursor: pointer;     /* Change the cursor to a pointer when hovering on this element */
	color: var(--md-sys-color-background)

}

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

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


input.toggle-switch {
	vertical-align: middle;
    font-size: 1em;      /* Input doesn't automatically inherit font size. This brings it in. */
	appearance: none;    /* Hide the existing checkbox so that the new rendering will overlay it */
	position: relative;  /* Relative positioning holds this elements space and lets :before and :after pseudo-elements position relative to this */
	cursor: pointer;     /* Change the cursor to a pointer when hovering on this element */
	margin: 0em 0.2em;   /* No top and bottom margin. Make space to the left and right. Use 'em' units to keep space relative to local font size */
    width: 1.4em; 		 /* Set the element width and height relative to the font size. */
    height: 0.8em;
}

/* Use the :after pseudo-element to create an oval as the surface of the button. */
input.toggle-switch:after {
    vertical-align: middle;	/* Center this vertically */
	content: '';            /* Empty text content. But still required to establish the element */
	display: inline-block;  /* Inline-block makes it take up rectangular space */
    position: absolute;	    /* Absolute positioning without left and top locates this exactly on top of the input.toggle-switch */
	width: 1.4em;           /* Width and height of the oval */
	height: 0.6em;
	background-color: rgb(128,128,128); /* Light gray fill */
	border-radius: 0.3em;   /* Border radius of half the height makes this an oval instead of a rectangle */
}

/* Use the :before pseudo-element to create a circle as the toggle handle */
input.toggle-switch:before {
    vertical-align: middle; /* Center this vertically thereby aligning to the background oval */
	content: '';            /* Empty text content required to take up any space */
	display: inline-block;  /* Inline-block makes it take up rectangular space */
	position: absolute;		/* Absolute positioning without x and y locates this on top of the input.toggle-switch */
	width: 0.7em;           /* Width and height are the same making it take up a square space which will be round with the border-radius */
	height: 0.7em;
    z-index: 1;				/* Z-index of 1 positions this on top of the input.toggle-switch:after */
	left: 0;                /* Position at the left edge of the parent checkbox (it will shift right when activated) */
	top: -0.1em;            /* Center it vertically on the background oval - tweaked to position just right */
	border: 1px solid rgb(128,128,128); /* border is the same color as the background oval */
	border-radius: 0.6em;   /* Radious greater than 1/2 the height/width makes a circle */
	background-color: white;  /* Fill with white */
	box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); /* Cast a shadow on the background */
	transition-duration: 0.3s; /* Animate turning on or off over 0.3 seconds */
}

/* Shift the handle to the right when turned on */
input.toggle-switch:checked:before {
	left: 0.7em;            /* When turned on, shift to the right */
	box-shadow: -1px 1px 3px rgba(0, 0, 0, 0.6); /* When turned on, cast the shadow the other direction */
}

/* Change the background color to green when turned on */
input.toggle-switch:checked:after {
	background-color: green;
}

.task-create {
	background-color: var(--md-sys-color-primary);
	color: var(--md-sys-color-on-primary);
	border: 2px solid var(--md-sys-color-on-primary);
	font-weight: bold;
	border-radius: 8px;
}

.task {
	display: block;
	width: 100%;
	box-sizing: border-box;

	border: 2px solid var(--md-sys-color-on-primary);
	border-radius: 6px;
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	background-color: var(--md-sys-color-primary);
}

.task-done:checked {
	color: green;
}


.task-done:checked + .task-description{
    text-decoration: line-through;
}