@import "../makelist.css";

/****************************/
/***** GLOBAL VARIABLES *****/
/****************************/
:root {
  --chkboxSize: 25px ;
}

/*******************************/
/***** LIST BUFFER SECTION *****/
/*******************************/
#buffer {
  text-align: left ;
  font-size: 36px ;
  border: 4px dashed #4fcf4f ;
  border-radius: 10px ;
}

/******************************/
/***** LIST ITEMS SECTION *****/
/******************************/

/** INDIVIDUAL ITEM ENTITIES **/
.items {
  font-size: 28px;
  list-style-type: none ; /* no notations */
  /* vertical-align: top ; */
  padding: calc( var(--chkboxSize) / 20 ) 0px ;
}

/** ITEM CONTENTS **/
tag {
  list-style-type: inherit ;
  padding-left: calc( var(--chkboxSize) * .4 ) ;
}

/** CHECKBOX button **/
.done {
  width: var(--chkboxSize) ;
  height: var(--chkboxSize) ;
}
.checkbox-container {
  display: inline-flex ;
  align-items: center ;
  cursor: pointer ;
  font-size: 18px ;
  position: relative ;
}
.checkbox-container input {
  opacity: 0 ;
  position: relative ;
  cursor: pointer ;
}
.checkmark {
  position: absolute ;
  left: 0 ;
  height: var(--chkboxSize) ;
  width: var(--chkboxSize) ;
  background-color: #eee ;
  border: 2px solid #ccc ;
  border-radius: 4px ;
}
.checkbox-container input:checked ~ .checkmark {
  background-color: #4caf50 ;
  border-color: #4caf50 ;
}
.checkmark::after {
  content: "" ;
  position: absolute ;
  display: none ;
}
.checkbox-container input:checked ~ .checkmark::after {
  display: block ;
  left: calc( var(--chkboxSize) * .3 ) ;
  top: calc( var(--chkboxSize) / 20 ) ;
  width: calc( var(--chkboxSize) * .3 ) ;
  height: calc( var(--chkboxSize) * .6 ) ;
  border: solid white ;
  border-width: 0 calc( var(--chkboxSize) * 0.08 ) calc( var(--chkboxSize) * .08 ) 0 ;
  transform: rotate(45deg) ;
}

/** EDIT & DELETE buttons **/
.material-symbols-rounded {
  box-sizing: content-box ;
  background: none ;
  width: 20px ;
  cursor: pointer ;
  border: none ;
  padding: 0px calc( var(--chkboxSize) / 5 ) ;
}

/** EDIT buttons **/
.material-symbols-rounded[data-type-name="edit"] {
  font-size: .9em ;
}

/** DELETE buttons **/
.material-symbols-rounded[data-type-name="remove"] {
  color: red ;
  font-size: .9em ;
}

.material-symbols-rounded:hover {
  opacity: .6 ;
}

.material-symbols-rounded:active {
  opacity: 1 ;
  color: purple ;
}

/*************************************/
/***** FOR LARGER-SCREENED USERS *****/
/*************************************/
@media (max-width: 800px) {

}