/* App Styles
 *
 * Typography
 * Button
 * Input
 * Toast
 * Layout
 * Utils
 *
 * Improvements:
 *
 *   * all font-* should be inline style prompts on the html elements
 *   * all the modifications to the btns should be through vars
 *   * all typography modifications should be through vars
 * */

:root {
  --app-orange: hsl(11deg 100% 68%);
  --app-green: hsl(157deg 29% 58%);
  --app-cream: hsl(38deg 58% 98%);
  --app-purple-16: hsl(245deg 100% 16%); /* active purple and typography */
  --app-purple-30: hsl(245deg 43% 30%);
  --app-purple-61: hsl(254deg 76% 61%);
  --app-purple-93: hsl(250deg 86% 93%);
  --app-purple-96: hsl(259deg 83% 96%);

  --font-normal: 400;
  --font-bold: 700;
}

/* ----------------------------------------------------------------------------
 * Typography
 * ------------------------------------------------------------------------- */

@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');

/* font-weight is 100 - 800
 *
 *
 * @todo need to add a "custom property overwrite" to all the components so
 * we can tweak font-styles etc.  Or just some easy way to do this.
 * */
.app-h1,
.app-h2,
.app-h3,
.app-h4,
.yas-label,
.yas-select-el,
.yas-input-el,
.yas-textarea-el,
.yas-checkbox__label,
.yas-btn,
.app-para,
.app-label {
  font-family: "JetBrains Mono", monospace;
  font-optical-sizing: auto;
  font-weight: var(--font-normal);
  font-style: normal;
}

.app-h1,
.app-h2,
.app-h3 {
  color: var(--app-purple-16);
}

.app-h2 {
  font-size: 32px;
}

.app-h3 {
  font-size: 20px;
}

.app-para {
  font-size: 16px;
}

.app-label {
  font-size: 12px;
}

.app-font-purple-16 {
  color: var(--app-purple-16);
}

.app-font-white {
  color: var(--yas-white);
}

.app-font-bold {
  font-weight: var(--font-bold);
}

.yas-label {
  font-weight: var(--font-bold);
}

.yas-select {
  font-size: 16px;
}

.float {
  box-shadow: 0 4px 4px gray;
}

.font-green {
  color: var(--app-green);
}

.app-box {
  border: 1px solid black;
  box-shadow: 4px 4px 0px 0px black;
}

/* ----------------------------------------------------------------------------
 * Button
 * ------------------------------------------------------------------------- */

.yas-btn[data-button-variant="primary"],
.yas-btn[data-button-variant="secondary"],
.yas-btn[data-button-variant="tertiary"],
.yas-btn[data-button-variant="link"],
.yas-btn[data-button-variant="toolbar"] {
  --button-border-radius:            30px;
  --button-outline-offset-focus:     3px;
  --button-box-shadow-color-1-focus: var(--yas-white);
  --button-box-shadow-color-2-focus: var(--app-purple-61);
}

.yas-btn[data-button-variant="primary"] {
  --button-background-color:        var(--yas-black);
  --button-background-color-hover:  var(--app-purple-30);
  --button-background-color-active: var(--app-purple-16);
  --button-border-color-active:     var(--app-purple-16);
}

.yas-btn[data-button-variant="secondary"] {
  --button-color:                   var(--yas-black);
  --button-color-hover:             var(--yas-black);
  --button-border-color-hover:      var(--app-purple-61);
  --button-border-color-active:     var(--app-purple-61);
  --button-background-color-hover:  var(--app-purple-96);
  --button-background-color-active: var(--app-purple-93);
}

.yas-btn[data-button-variant="link-text"] {
  --button-color-hover:     var(--app-purple-61);
  --button-padding-right:   0;
  --button-padding-left:    0;
}

.yas-btn[data-button-variant="toolbar"] {
  --button-toolbar-color-hover:              var(--app-black);
  --button-toolbar-border-color-hover:       var(--app-purple-61);
  --button-toolbar-background-color-hover:   var(--app-purple-96);
  --button-toolbar-background-color-active:  var(--app-purple-16);
  --button-toolbar-box-shadow-color-1-focus: var(--yas-white);
  --button-toolbar-box-shadow-color-2-focus: var(--app-purple-61);
  --button-toolbar-anchor-border-radius:     30px;
}

.yas-btn[data-button-variant="signifier"] {
  --button-color: var(--yas-black);
  --button-color-hover: var(--yas-black);
  --button-background-color: var(--app-orange);
  --button-background-color-hover: var(--app-orange);
  padding: .1em .1em;
  border: none;
}

/* ----------------------------------------------------------------------------
 * Input
 * ------------------------------------------------------------------------- */

.yas-input-el[data-input-variant="app"],
.yas-input-el[data-input-variant="filter-search"] {
  --input-border-color-hover: var(--app-purple-61);
  --input-border-color-focus: var(--app-purple-61);
  --input-border-radius:      0px;
  --input-border-width:       1px;
}

/* ----------------------------------------------------------------------------
 * Toast
 * ------------------------------------------------------------------------- */

.app-toast {
  position: fixed;
  bottom: 0;
  /* layout - pad the sides */
  inset-inline-start: 1em;
  inset-inline-end: 1em;
  /* layout - gives space below, but we start at zero for animation */
  transform: translate3d(0, 0, 0);
  /* start hidden */
  opacity: 0;
  animation: slideDown 0.4s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}


.app-toast.app-toast-dismiss {
  animation: slideUp 0.3s cubic-bezier(0.36, 0.66, 0.04, 1) forwards;
}


/* ----------------------------------------------------------------------------
 * Select
 * ------------------------------------------------------------------------- */

.yas-select-el[data-select-variant="app"] {
  --select-border-width:       1px;
  --select-border-radius:      0px;
  --select-border-color-hover: var(--app-purple-61);
  --select-border-color-focus: var(--app-purple-61);
}

.yas-select-with-filter[data-select-variant="app"] {
  --select-border-width:       1px;
  --select-border-radius:      0px;
  --select-border-color-hover: var(--app-purple-61);
  --select-border-color-focus: var(--app-purple-61);
  --select-dropdown-option-background-color-hover: var(--app-purple-96);
  --select-dropdown-option-background-color-selected: var(--app-purple-93);
}

/* ----------------------------------------------------------------------------
 * Layout
 * ------------------------------------------------------------------------- */

.bottom-navigation-bar {
  display: grid;
  grid-template-columns: repeat(5, 1fr);

  padding-bottom: env(safe-area-inset-bottom);
}

/* ----------------------------------------------------------------------------
 * Utils
 * ------------------------------------------------------------------------- */

.bg-gray {
  background-color: var(--yas-white-96);
}

.bg-white {
  background-color: var(--yas-white);
}

.border {
  border: 1px solid var(--yas-black);
}

.vertical-scroll[data-scroll-height="main"] {
  --max-scroll-container-height: 79vh;
}

/* preserve the white-space between the code blocks.  This respects our
 * spaces. */
.white-space-pre {
  white-space: pre;
}

@keyframes slideDown {
  to {
    opacity: 1;
    transform: translate3d(0, -30%, 0);
  }
}

@keyframes slideUp {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
}

/**
 * Goals
 */


.app-goal-header {
  color: var(--yas-white);
  background-color: var(--app-purple-61);
  border-bottom: 1px solid black;
}

/**
 * Work Items
 *
 * Temporary Styles
 *
 * As we're developing the app, these are intended to be temporary and we will
 * return to them and develop a sustainable approach to implementing.
 *
 * ------------------------------------------------------------------------- */
.yas-work-items {
  background-color: var(--yas-white);
}

.yas-work-item {
}

.yas-list-item-pointer {
  position: absolute;
  left: -32px;
  top: 8px;
  display: none
}

.yas-work-item:focus-within > .yas-list-item-pointer {
  display: block;
}

/* @note styles applied the the step item we're moving above/below */
.target-step-item {
  color: red;
}

/* @note add view transitions - a simple cross-fade animation for the app */
@view-transition {
  navigation: auto;
}


/*
 * Modal
 *
 * */

.modal-header {
  color: var(--yas-white);
  background-color: var(--app-purple-61);
}

@keyframes slide-in {
  0% {
    transform: translateX(0) translateY(100%); /* Start below, keep X centered */
    opacity: 0;
  }
  100% {
    transform: translateX(0) translateY(0); /* End at bottom, keep X centered */
    opacity: 1;
  }
}

/* @todo more of a modal reset - which means the padding reset should be higher
 * in the css order
 * */
.quick-action-modal {
  width: 100vw;
  height: 75vh;
  padding: .5em;
}

.quick-action-modal::backdrop {
  /* @todo move this gray to one of our accepted colors */
  background-color: hsla(0, 0%, 20%, 0.35);
}

.quick-action-modal[open] {
  animation-name: slide-in;
  animation-duration: .25s;
  animation-iteration-count: 1;
}