@import url(global.css);

body {
  overflow-x: hidden;
  padding: 1.5625rem 2rem;
  background-color: var(--background-primary);
}

#logo {
  display: block;
  margin-inline: auto;
}

header,
main {
  max-width: 39.1875rem;
  margin-inline: auto;
  width: 100%;
}

header {
  margin-top: 2rem;
  display: grid;
  gap: 1rem;

  & div {
    display: flex;
    align-items: center;
  }

}

main {
  margin-top: 2.75rem;

  & section.add-item {

    & form {
      width: 100%;
      display: flex;
      flex-direction: column;
      gap: 1rem;

      & input {
        padding: .6875rem 1.125rem;
        background-color: var(--background-secondary);
        border: 2px solid var(--border-primary);
        color: var(--content-primary);
        flex: 1;

        &::placeholder {
          color: var(--content-tertiary);
        }

        &:hover {
          border: 2px solid var(--border-hover);
        }

        &:focus {
          border: 2px solid var(--color-brand);
        }
      }

      & button {
        padding: .625rem 1.5rem;
        background-color: var(--color-brand);
        color: var(--always-white);
        cursor: pointer;
        transition: background-color 0.2s ease;

        &:hover {
          background-color: var(--color-brand-hover);
        }
      }
    }
  }

  & ul {
    margin-top: 40px;
    display: grid;
    gap: .75rem;
    list-style-type: none;

    & li {
      border-radius: .75rem;
      padding: .75rem;
      background-color: var(--background-secondary);
      color: var(--content-secondary);
      display: flex;
      align-items: center;
      gap: .75rem;

      & form {
        flex: 1;
      }

      & label {
        display: flex;
        align-items: center;
        gap: .75rem;
        position: relative;
        cursor: pointer;

        & input[type="checkbox"] {
          position: absolute;
          opacity: 0;
          cursor: pointer;

          &:hover~.checkmark {
            border-color: var(--border-hover);
          }

          &:checked {
            &~.checkmark {
              border-color: var(--color-brand);
              background: url(../assets/checked.svg) center no-repeat var(--color-brand);
            }

            &~p {
              text-decoration: line-through;
            }
          }
        }

        & .checkmark {
          width: 1rem;
          height: 1rem;
          border-radius: .375rem;
          border: 1px solid var(--border-primary);
        }

        & p {
          flex: 1;
          line-height: 1rem;
        }
      }

      & img {
        width: 1rem;
        cursor: pointer;
        transition: scale 0.1s ease;

        &:hover {
          scale: 1.2;
        }
      }
    }
  }

  & #alert {
    margin-top: 2.5rem;
    background-color: var(--color-danger);
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--always-white);
    padding: .75rem;
    padding-right: .5rem;

    & span {
      
    }

    & img[src*="alert-delete"]{
      margin-left: auto;
      cursor: pointer;
      transition: scale 0.1s ease;

      &:hover {
        scale: 1.2;
      }
    }
  }
}


@media (width >=48rem) {
  main section.add-item form {
    flex-direction: row;
  }
}