*, *::before, *::after {
  box-sizing: border-box;

  font-family: 'Quicksand', sans-serif;
}

body {
  margin: 0;

  --black: rgb(19, 19, 19);
  --onTheme: white;
  --theme: rgb(68, 30, 255);
  --themeShadeLight: rgb(54, 24, 208);
  --themeShadeDark: rgb(42, 18, 158);
}

.material-symbols-outlined {
  font-variation-settings:
  'FILL' 0,
  'wght' 400,
  'GRAD' 0,
  'opsz' 48
}

/* Components */

.primaryButton,
.secondaryButton {
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
  border-width: 1px;
  border-style: solid;

  padding: 1em;

  display: flex;
  align-items: center;
  gap: 0.5em;

  user-select: none;
  transform: translateZ(1px);
}

.primaryButton > .material-symbols-outlined,
.secondaryButton > .material-symbols-outlined {
  font-size: 1em;
  font-weight: bold;
  /* padding-right: 0.5em; */
}

.primaryButton {
  color: var(--onTheme);
  background: var(--theme);
  border-color: var(--theme);
}

.primaryButton:hover {
  background-color: var(--themeShadeLight);
  border-color: var(--themeShadeLight);
}

.primaryButton:active {
  background-color: var(--themeShadeDark);
  border-color: var(--themeShadeDark);
}

.secondaryButton {
  color: var(--black);
  background: white;
  border-color: #ddd;
}

.secondaryButton:hover {
  background-color: #eee;
}

.secondaryButton:active {
  background-color: #aaa;
}

.iconButton {
  background: none;
  border: none;
  cursor: pointer;
  
  user-select: none;

  padding: 0;

  display: flex;
}

.iconButton > .material-symbols-outlined {
  font-size: 1em;
}

.toastWrapper {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 20px;
  height: 40px;

  padding: 0 16px;

  display: flex;
  justify-content: center;

  transform: translateY(300%);
  transition: transform 200ms;
}

.toastWrapper .toast {
  width: 100%;
  max-width: 500px;
  height: 100%;

  padding: 0 16px;
  border-radius: 4px;
  color: white;
  background: black;

  display: flex;
  flex-direction: row;
  align-items: center;
}

.toastWrapper .toast.info {
  background: blue;
}
.toastWrapper .toast.success {
  background: rgb(40, 137, 55);
}
.toastWrapper .toast.error {
  background: rgb(255, 48, 48);
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tab_container input[type=radio] {
  display: none;
}

.tab_container .views .view {
  display: none;
}

.tab_container input[type=radio]#full:checked ~ .views .view:nth-child(1) { display: flex; }
.tab_container input[type=radio]#summary:checked ~ .views .view:nth-child(2) { display: flex; }

.tab_container > label {
  display: inline-flex;
  padding: 0.5em;
  margin-bottom: 0.5em;
  cursor: pointer;

  -webkit-user-select: none;  /* Chrome all / Safari all */
  -moz-user-select: none;     /* Firefox all */
  -ms-user-select: none;      /* IE 10+ */
  user-select: none;          /* Likely future */ 
}
.tab_container input[type=radio]:checked + label {
  background: var(--theme);
  color: var(--onTheme);
  border-radius: 4px;
}

/* */

/* Header */

.header {
  background: var(--theme);
  color: var(--onTheme);

  display: flex;
  justify-content: space-between;
  padding: 4px;
}

.header a {
  color: currentColor;
}

/* Body */

.body {
  margin: 8px;
  max-width: 600px;
}

.nameWrapper {
  display: flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 16px;

  color: gray;
}

#name {
  color: black;
  font-size: 2em;
}

.items {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.items > .item {
  background: white;
  border: 1px solid gray;
  border-radius: 4px;
  box-shadow: 0 3px 15px 0 rgba(0, 0, 0, 0.15);

  /* height: 50px; */
  padding-left: 15px;
  padding-right: 15px;

  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 15px;
}

.items > .item > .circle {
  width: 20px;
  min-width: 20px;
  height: 20px;
  min-height: 20px;

  border-radius: 50%;
  background: #eee;
}

.items > .item > textarea,
.items > .item > span {
  /* height: calc(100% - 20px); */
  /* padding: 1em; */
  /* padding-left: 0.25em; */
  flex: 1;
  resize: none;
  height: 50px;
  padding: 13px;
  min-width: 0;

  border-radius: 4px;
  border: none;
  background: white;
  font-weight: bold;
  font-size: 20px;

  word-break: break-word;
}
.items > .item > .name {
  flex: unset;
  flex-grow: 1;
}

.items > .item > textarea::placeholder {
  font-style: italic;
}

.items > .item > .remove {
  font-size: 2em;
  color: gray;
}

#addItem {
  margin: 32px;
}

.shareContainer {
  display: flex;
  gap: 10px;
  align-items: initial;
}

#shareURL {
  width: 250px;
  max-width: 100%;
}

#qrcode-container img {
  margin-top: 10px;
  width: 100px;
}

@media (max-width: 400px) {
  .shareContainer {
    display: grid;
    grid-template-areas: 
    "l l"
    "s c";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  #shareURL {
    grid-area: l;
    width: 100%;
  }

  .shareContainer > button {
    justify-content: center;
  }
}