@import '~stylekit';

html {
  font-size: var(--sn-stylekit-base-font-size);
  background-color: transparent; // to help with seamless transition while loading themes
}

body {
  font-family: sans-serif;
  margin: 15px;
  color: var(--sn-stylekit-editor-foreground-color);
  background-color: transparent;
}

* {
  // To prevent gray flash when focusing input on mobile Safari
  -webkit-tap-highlight-color: rgba(0,0,0,0);
}

.task {
  display: flex;
  flex-direction: row;
  margin-bottom: 8px;

  .checkbox-container {
    padding-left: 20px;
    margin-top: 6px;
    margin-left: 1px;
    display: block;
    position: relative;
    cursor: pointer;
    font-size: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;

    input:checked ~ .checkmark:after {
      display: block;
    }

    input:checked ~ .checkmark:after {
      display: block;
    }

    /* On mouse-over, add a grey background color */
    &:hover input ~ .checkmark {
      border-color: var(--sn-stylekit-border-color);
    }

    /* When the checkbox is checked, add a blue background */
    input:checked ~ .checkmark {
      background-color: var(--sn-stylekit-info-color);
      border-color: var(--sn-stylekit-info-color);
    }

    /* When the mouse is held on the box */
    input:active ~ .checkmark {
      background-color: var(--sn-stylekit-info-color);
      // border-color: var(--sn-stylekit-info-contrast-color);
    }

    /* Show the checkmark when checked */
    input:checked ~ .checkmark:after {
      display: block;
    }

    /* Hide the browser's default checkbox */
    input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
      height: 0;
      width: 0;
    }
  }

 .checkbox {
   margin-top: 7px;
 }

 .checkmark {
   position: absolute;
   top: 0;
   left: 0;
   height: 10px;
   width: 10px;
   border-radius: 1px;
   background-color: var(--sn-stylekit-contrast-background-color);;
   border: 1px solid var(--sn-stylekit-contrast-border-color);

   &:after {
    content: "";
    position: absolute;
    display: none;
    left: 3px;
    top: 1px;
    width: 3px;
    height: 6px;
    border: solid white;
    border-width: 0 1px 1px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
   }
 }

 textarea.task-input-textarea {
   font-family: sans-serif;
   border: none;
   width: 100%;
   resize: none;
   font-size: var(--sn-stylekit-font-size-editor);
   color: var(--sn-stylekit-editor-foreground-color);
   outline: none;
   overflow: hidden;
   background-color: transparent;
   min-height: 26px;
 }
}

.task-dragging {
  padding: 2px;
  background-color: var(--sn-stylekit-contrast-background-color);
  border: 1px dashed var(--sn-stylekit-border-color);
}

.completed {
  text-decoration: line-through;
  opacity: 0.6;
}

.clear-button {
  margin: 10px 10px 0 0;
}

.create-task-input {
  width: 100%;
  height: 30px;
  outline: none;
  padding: 0 6px 0 6px;
  margin: 6px 0 6px 0;
  font-size: var(--sn-stylekit-font-size-editor);
  border: 1px solid var(--sn-stylekit-border-color);
  border-radius: 2px;
  background-color: var(--sn-stylekit-contrast-background-color);
  color: var(--sn-stylekit-contrast-foreground-color);

  /* Remove default shadow for iOS mobile */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.task-section {
  margin-bottom: 16px;
}

.task-section h3 {
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: normal;
  opacity: 0.3;
}

a {
  font-weight: bold;
  font-size: 10px;
  opacity: 0.3;
  cursor: pointer;
}

a:hover {
  opacity: 0.8;
  text-decoration: underline;
}

.task-input {
  display: flex;
  flex-wrap: wrap;
}