/* GLOBAL */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root{
  --background-primary: #F4F5FB;
  --background-secondary: #FFF;
  --color-brand: #CA3884;
  --color-brand-hover: #A52C6B;
  --color-danger: #C93847;
  --content-primary: #080B12;
  --content-secondary: #374151;
  --content-tertiary: #9CA3AF;
  --always-white: #FFF;
  --border-primary: #D1D5DB;
  --border-hover: #B9C2D0;

  --ff-base: "Inter", sans-serif;
  --title: 700 1.5rem/2rem var(--ff-base);
  --label: 600 1rem/1.25rem var(--ff-base);
  --paragraph: 500 1rem/1.25rem var(--ff-base);
  --placeholder: 400 1rem/1.4 var(--ff-base);
  --link: 500 .875rem/1rem var(--ff-base);
}

html, body{
  width: 100%;
  min-height: 100vh;
  height: auto;

  background-color: var(--background-primary);
  font: var(--paragraph);

  &::-webkit-scrollbar{
    width: .375rem;
    background: var(--border-primary);
  }

  &::-webkit-scrollbar-thumb{
    background-color: var(--color-brand);
  }
}

body{
  padding: 2rem;
}

.container{
  width: 100%;
  max-width: 28.125rem;
  margin-inline: auto;
}

img{
  vertical-align: top;
}

button{
  background: none;
  border: 0;
  cursor: pointer;
}

/* HEADER */
header{
  text-align: center;
}

/* MAIN */
a{
  color: var(--color-brand);
  font: var(--link);
  text-decoration: none;

  display: block;
  margin-block: 3.875rem 1rem;
}

h1{
  color: var(--content-primary);
  font: var(--title);
}

form{
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 2.75rem 2.5rem;

  & > #newItemInput{
    outline: .125rem solid var(--border-primary);
    border: 0;
    border-radius: .75rem;
    background-color: var(--background-secondary);

    padding-inline: 1.125rem;
    height: 2.75rem;

    color: var(--content-primary);
    font: var(--placeholder);

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

    &:hover{
      outline-color: var(--border-hover);
    }

    &:focus{
      outline-color: var(--color-brand);
    }
  }

  & > #addNewItem{
    background-color: var(--color-brand);
    border-radius: .75rem;
    color: var(--always-white);
    
    height: 2.75rem;
    font: var(--label);
    transition: background-color .3s ease-in-out;

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

ul#shoppingList{
  margin-bottom: 5rem;
  list-style: none;
  max-height: 16.5rem;
  overflow: auto;

  display: flex;
  flex-direction: column;
  gap: .75rem;

  &::-webkit-scrollbar{
    width: .375rem;
    background: var(--border-primary);
  }

  &::-webkit-scrollbar-thumb{
    background-color: var(--color-brand);
  }

  & > .shoppingItem{
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: var(--background-secondary);
    border-radius: .75rem;
    padding: .75rem;

    & > div{
      display: flex;
      align-items: center;
      gap: .75rem;

      & > input[type="checkbox"]{
        all: unset;
        cursor: pointer;
        outline: .0625rem solid var(--border-primary);
        border-radius: .375rem;

        position: relative;
        width: 1rem;
        height: 1rem;

        &:hover, &:focus{
          outline: .125rem solid var(--border-hover);
        }

        &:checked{
          background-color: var(--color-brand);
          outline-color: var(--color-brand);
          &::before{
            content: "";
            display: block;
            background: url("./assets/icons/check.svg") no-repeat center / contain;
            position: absolute;
            inset: 0;
          }
        }
      }

      & > label{
        color: var(--content-secondary);
        cursor: pointer;
      }

      &:has(:checked){
        & > label{
          text-decoration: line-through;
          opacity: .65;
        }
      }
    }
  }
}

/* FOOTER */
footer{
  position: fixed;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);

  display: none;
  justify-content: space-between;
  align-items: center;

  background-color: var(--color-danger);
  border-radius: .75rem;
  padding: .75rem;
  max-width: 28.125rem;
  width: calc(100% - 4rem);

  & > div{
    display: flex;
    align-items: center;
    gap: .5rem;

    & > span{
      color: var(--always-white);
      font: var(--label);
    }
  }
}

/* DESKTOP ADAPTATION */
@media screen and (width >= 1024px) {
  .container{
    max-width: 39.1875rem;
  }

  form{
    flex-direction: row;

    & > #newItemInput{
      flex-grow: 1;
    }

    & > #addNewItem{
      flex-basis: 10rem;
    }
  }
  
  footer#alert{
    max-width: 39.1875rem;
  }
}