#putaway-wrapper {
  --boxShadow: 0 24px 60px rgb(15 23 42 / 18%);
  --fontFamily: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --primaryColor: #287ebd;
  --backgroundColor: #ffffff;
  --textColor: #0f172a;
  --backdropBackgroundColor: rgb(15 23 42 / 45%);
  --backdropBackgroundBlur: 3px;
  --iconColor: #ffffff;
  --iconBackgroundColor: #287ebd;
}

#putaway-wrapper #putaway-banner,
#putaway-wrapper #putaway-modal {
  border: 1px solid #dbe4ee;
}

#putaway-wrapper .putaway-button {
  min-height: 44px;
  font-weight: 650;
}

#putaway-wrapper #putaway-banner .putaway-button,
#putaway-wrapper #putaway-modal .putaway-button {
  padding: 8px 16px;
}

#putaway-wrapper .putaway-button-secondary {
  border-color: #94a3b8;
  background: #ffffff;
  color: #0f172a;
}

#putaway-wrapper .putaway-button-secondary:hover {
  border-color: #64748b;
  background: #f1f5f9;
  color: #0f172a;
}

#putaway-wrapper #putaway-icon {
  box-shadow: 0 12px 30px rgb(15 23 42 / 24%);
}

html.app-dark #putaway-wrapper,
html[data-theme='dark'] #putaway-wrapper {
  --boxShadow: 0 24px 60px rgb(0 0 0 / 45%);
  --primaryColor: #60a5fa;
  --backgroundColor: #1e1e1e;
  --textColor: #f8fafc;
  --backdropBackgroundColor: rgb(0 0 0 / 70%);
  --iconColor: #1e1e1e;
  --iconBackgroundColor: #60a5fa;
}

html.app-dark #putaway-wrapper #putaway-banner,
html.app-dark #putaway-wrapper #putaway-modal,
html[data-theme='dark'] #putaway-wrapper #putaway-banner,
html[data-theme='dark'] #putaway-wrapper #putaway-modal {
  border-color: #475569;
  background-color: #1e1e1e;
  color: #f8fafc;
}

html.app-dark #putaway-wrapper #putaway-modal h1,
html.app-dark #putaway-wrapper #putaway-modal p,
html.app-dark #putaway-wrapper #putaway-modal legend,
html[data-theme='dark'] #putaway-wrapper #putaway-modal h1,
html[data-theme='dark'] #putaway-wrapper #putaway-modal p,
html[data-theme='dark'] #putaway-wrapper #putaway-modal legend {
  color: #f8fafc;
}

html.app-dark #putaway-wrapper .putaway-modal-close,
html[data-theme='dark'] #putaway-wrapper .putaway-modal-close {
  background: #1e1e1e;
}

html.app-dark #putaway-wrapper .putaway-button-primary,
html.app-dark #putaway-wrapper .putaway-button-primary:hover,
html[data-theme='dark'] #putaway-wrapper .putaway-button-primary,
html[data-theme='dark'] #putaway-wrapper .putaway-button-primary:hover {
  color: #ffffff;
}

html.app-dark #putaway-wrapper .putaway-button-secondary,
html[data-theme='dark'] #putaway-wrapper .putaway-button-secondary {
  border-color: #64748b;
  background: #1e293b;
  color: #f8fafc;
}

html.app-dark #putaway-wrapper .putaway-button-secondary:hover,
html[data-theme='dark'] #putaway-wrapper .putaway-button-secondary:hover {
  border-color: #94a3b8;
  background: #334155;
  color: #ffffff;
}

@media (max-width: 599px) {
  #putaway-wrapper #putaway-banner,
  #putaway-wrapper #putaway-modal {
    border-radius: 16px;
  }

  #putaway-wrapper #putaway-modal {
    width: calc(100% - 1rem);
    max-width: calc(100% - 1rem);
    max-height: calc(100% - 1rem);
    margin: 0.5rem;
  }
}