@import '../../../../styles/variables';

.dark-mode {
  ajs-todomvc {
    .todoapp {
      background-color: transparent;
    }

    .main,
    .todo-list li,
    .footer {
      border-bottom: 1px solid $nightShade;
    }

    .footer {
      &:before {
        box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px $nightShade,
          0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px $nightShade,
          0 17px 2px -6px rgba(0, 0, 0, 0.2);
      }
    }
  }
}

ajs-todomvc {
  color: inherit;
  min-width: 230px;
  max-width: 550px;
  margin: 0 auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  display: flex;
  flex-direction: column;
  > * {
    flex-shrink: 0; // safari fix
  }

  .hidden {
    display: none;
  }

  .todoapp {
    position: relative;
    margin-top: 50px;
    background-color: #fff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);

    h1 {
      font-size: 100px;
      font-weight: 100;
      text-align: center;
      line-height: 1;
      color: $primary-color;
      text-rendering: optimizeLegibility;
    }

    h3 {
      text-align: center;
      font-weight: 300;
    }
  }

  .new-todo,
  .edit {
    position: relative;
    margin: 0;
    width: 100%;
    font-size: 24px;
    font-family: inherit;
    font-weight: inherit;
    line-height: 1.4em;
    color: inherit;
    padding: 6px;
    border: 1px solid #999;
    box-shadow: inset 0 -1px 5px 0 rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  .new-todo {
    padding: 16px 16px 16px 60px;
    border: none;
    background: rgba(0, 0, 0, 0.003);
    box-shadow: inset 0 -2px 1px rgba(0, 0, 0, 0.03);
  }

  .main {
    position: relative;
    z-index: 2;
  }

  .main,
  .todo-list li,
  .footer {
    border-bottom: 1px solid $dayShade;
  }

  .toggle-all {
    text-align: center;
    border: none; /* Mobile Safari */
    opacity: 0;
    position: absolute;

    & + label {
      width: 60px;
      height: 34px;
      font-size: 0;
      position: absolute;
      top: -52px;
      left: -8px;
      -webkit-transform: rotate(90deg);
      transform: rotate(90deg);
    }

    & + label:before {
      content: '❯';
      font-size: 22px;
      padding: 10px 27px 10px 27px;
    }

    &:checked + label:before {
      color: #737373;
    }
  }

  .todo-list {
    margin: 0;
    padding: 0;
    list-style: none;

    li {
      position: relative;
      font-size: 24px;

      &:last-child {
        border-bottom: none;
      }

      &.editing {
        border-bottom: none;
        padding: 0;

        .edit {
          display: block;
          width: 506px;
          padding: 12px 16px;
          margin: 0 0 0 43px;
        }

        .view {
          display: none;
        }
      }

      .toggle {
        text-align: center;
        width: 40px;
        /* auto, since non-WebKit browsers doesn't support input styling */
        height: auto;
        position: absolute;
        top: 0;
        bottom: 0;
        opacity: 0;
        margin: auto 0;
        border: none; /* Mobile Safari */
        -webkit-appearance: none;
        appearance: none;

        & + label {
          /*
            Firefox requires `#` to be escaped - https://bugzilla.mozilla.org/show_bug.cgi?id=922433
            IE and Edge requires *everything* to be escaped to render, so we do that instead of just the `#` - https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/7157459/
          */
          background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23ededed%22%20stroke-width%3D%223%22/%3E%3C/svg%3E');
          background-repeat: no-repeat;
          background-position: center left;
        }

        &:checked + label {
          background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%22-10%20-18%20100%20135%22%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2250%22%20fill%3D%22none%22%20stroke%3D%22%23bddad5%22%20stroke-width%3D%223%22/%3E%3Cpath%20fill%3D%22%235dc2af%22%20d%3D%22M72%2025L42%2071%2027%2056l-4%204%2020%2020%2034-52z%22/%3E%3C/svg%3E');
        }
      }

      label {
        word-break: break-all;
        padding: 15px 15px 15px 60px;
        display: block;
        line-height: 1.2;
        transition: color 0.4s;
      }

      &.completed label {
        text-decoration: line-through;
      }

      .destroy {
        display: none;
        position: absolute;
        top: 0;
        right: 10px;
        bottom: 0;
        width: 40px;
        height: 40px;
        margin: auto 0 11px;
        font-size: 30px;
        color: #cc9a9a;
        transition: color 0.2s ease-out;

        &:hover {
          color: #af5b5e;
        }

        &:after {
          content: '×';
        }
      }

      &:hover .destroy {
        display: block;
      }

      .edit {
        display: none;
      }

      &.editing:last-child {
        margin-bottom: -1px;
      }
    }
  }

  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;

    > * {
      z-index: 1;
    }

    &:before {
      content: '';
      position: absolute;
      z-index: 0;
      right: 0;
      bottom: 0;
      left: 0;
      height: 50px;
      overflow: hidden;
      box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2), 0 8px 0 -3px $dayShade,
        0 9px 1px -3px rgba(0, 0, 0, 0.2), 0 16px 0 -6px $dayShade,
        0 17px 2px -6px rgba(0, 0, 0, 0.2);
    }

    .todo-count {
      min-width: 70px;

      strong {
        font-weight: 300;
      }
    }

    .filters {
      margin: 0 0 0 42px;
      padding: 0;
      list-style: none;

      li {
        display: inline;

        a {
          color: inherit;
          margin: 3px;
          padding: 3px 7px;
          text-decoration: none;
          border: 1px solid transparent;
          border-radius: 3px;

          &:hover,
          &.selected {
            border-color: $primary-color;
          }
        }
      }
    }

    .clear-completed {
      color: inherit;
      font-weight: inherit;

      &:hover {
        text-decoration: underline;
      }
    }
  }

  .time-travel {
    margin-top: 40px;
    display: flex;
    justify-content: space-around;

    button {
      min-height: 2.4em;
    }
  }

  > footer {
    margin-top: 5em;
    text-align: center;
    a {
      font-size: 2em;
      color: $primary-color;
    }
  }

  /*
    Hack to remove background from Mobile Safari.
    Can't use it globally since it destroys checkboxes in Firefox
  */
  @media screen and (-webkit-min-device-pixel-ratio: 0) {
    .toggle-all,
    .todo-list li .toggle {
      background: none;
    }

    .todo-list li .toggle {
      height: 40px;
    }
  }

  @media (max-width: 430px) {
    .footer {
      height: 50px;
    }

    .filters {
      bottom: 10px;
    }
  }
}
