@import "./reset.css";
@import "./semantics.css";

:root {
  /* Brand Colors */
  --bz-c-brand-red: #e4002b;
  --bz-c-black: #000;
  --bz-c-pure-white: #fff;
  --bz-c-off-white: #dfdede;

  /* Helper vars NOT IN FIGMA */
  --nav-header-height: 80px;
  --nav-footer-height: 72px;
  --page-gutter: 16px;
  --form-control-border-radius: 16px;
  --searchInput-border-radius: 8px;
  --margin-default: 16px;
  --transition-speed-default: 300ms;

  --z-index-page: 100;
  --z-index-page-overlay: 250; /* Open select boxes, dropdowns within page */
  --z-index-app-ui: 500; /* Header/Footer, nav */
  --z-index-modal: 2000; /* Modals, above app UI */
  --z-index-loader: 5000; /* Loading indicators */
  --z-index-max: 10000; /* Arbitrary max */
}

html,
body {
  /* height: 100%; */
  margin: 0;
  min-height: 100%;
  overscroll-behavior: none;
  padding: 0;
}

/* Capacitor Template Overrides */
body {
  background-color: var(--surfaces-primary-bg) !important;
  display: block !important;
  height: auto;
  min-height: 100% !important;
}

body {
  background-color: var(--surfaces-primary-bg);
  color: var(--text-color-primary);
  font-family: var(--typography-font-family-primary);
  font-size: var(--text-body-m-size);
  font-weight: var(--text-body-m-weight);
  letter-spacing: var(--text-body-m-tracking);
  line-height: var(--text-body-m-line-height);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  transition: background-color var(--transition-speed-default) ease,
    color var(--transition-speed-default) ease;
}

a {
  color: var(--text-color-primary);
  font-weight: var(--typography-font-weight-bold);
  text-underline-offset: 2px;
}

a:not(:is(:hover, :focus)) {
  text-decoration-color: color-mix(in srgb, currentColor, transparent 55%);
}

/* TODO: Spacing tokens */
p {
  margin: var(--margin-default) 0;
}

/* From hostPage */
#home-page-root {
  bottom: var(--nav-footer-height);
  position: fixed;
  overflow-x: hidden;
  top: calc(var(--nav-header-height) + env(safe-area-inset-top) / 2);
  transition: bottom var(--transition-speed-default),
    top var(--transition-speed-default);
  z-index: var(--z-index-page);
  width: 100%;
}

.app-layout.hidden-header #home-page-root {
  top: 0;
}

.app-layout.hidden-ui #home-page-root {
  bottom: 0;
  top: 0;
}

/**************************************************
  Text & Typography 
  */

.text-display-xl {
  font-family: var(--text-display-xl-font);
  font-size: var(--text-display-xl-size);
  font-weight: var(--text-display-xl-weight);
  letter-spacing: var(--text-display-xl-tracking);
  line-height: var(--text-display-xl-line-height);
  margin: 0 0 4px;
}

.text-heading-l {
  font-family: var(--text-heading-l-font);
  font-size: var(--text-heading-l-size);
  font-weight: var(--text-heading-l-weight);
  letter-spacing: var(--text-heading-l-tracking);
  line-height: var(--text-heading-l-line-height);
  margin: 0 0 4px;
}

.text-heading-m {
  font-family: var(--text-heading-m-font);
  font-size: var(--text-heading-m-size);
  font-weight: var(--text-heading-m-weight);
  letter-spacing: var(--text-heading-m-tracking);
  line-height: var(--text-heading-m-line-height);
  margin: 0 0 4px;
}

.text-heading-s {
  font-family: var(--text-heading-s-font);
  font-size: var(--text-heading-s-size);
  font-weight: var(--text-heading-s-weight);
  letter-spacing: var(--text-heading-s-tracking);
  line-height: var(--text-heading-s-line-height);
  margin: 0 0 4px;
}

.text-subheading-l {
  color: var(--text-color-secondary);
  font-family: var(--text-subheading-l-font);
  font-size: var(--text-subheading-l-size);
  font-weight: var(--text-subheading-l-weight);
  letter-spacing: var(--text-subheading-l-tracking);
  line-height: var(--text-subheading-l-line-height);
  margin: 0 0 4px;
}

.text-subheading-m {
  color: var(--text-color-secondary);
  font-family: var(--text-subheading-m-font);
  font-size: var(--text-subheading-m-size);
  font-weight: var(--text-subheading-m-weight);
  letter-spacing: var(--text-subheading-m-tracking);
  line-height: var(--text-subheading-m-line-height);
}

.text-subheading-s {
  color: var(--text-color-secondary);
  font-family: var(--text-subheading-s-font);
  font-size: var(--text-subheading-s-size);
  font-weight: var(--text-subheading-s-weight);
  letter-spacing: var(--text-subheading-s-tracking);
  line-height: var(--text-subheading-s-line-height);
  margin: 0 0 4px;
}

.text-body-l {
  font-size: var(--text-body-l-size);
  font-weight: var(--text-body-l-weight);
  letter-spacing: var(--text-body-l-tracking);
  line-height: var(--text-body-l-line-height);
}

.text-body-m {
  font-size: var(--text-body-m-size);
  font-weight: var(--text-body-m-weight);
  letter-spacing: var(--text-body-m-tracking);
  line-height: var(--text-body-m-line-height);
}

.text-body-s {
  font-size: var(--text-body-s-size);
  font-weight: var(--text-body-s-weight);
  letter-spacing: var(--text-body-s-tracking);
  line-height: var(--text-body-s-line-height);
}

.text-caption {
  font-family: var(--text-caption-font);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  line-height: var(--text-caption-line-height);
}

.text-label-l {
  font-size: var(--text-label-l-size);
  font-weight: var(--text-label-l-weight);
  letter-spacing: var(--text-label-l-tracking);
  line-height: var(--text-label-l-line-height);
}

.text-label-s {
  font-size: var(--text-label-s-size);
  font-weight: var(--text-label-s-weight);
  letter-spacing: var(--text-label-s-tracking);
  line-height: var(--text-label-s-line-height);
}

/**************************************************
  App UI
  */

.app-layout {
  padding: 0 0 var(--nav-footer-height);
}

.app-layout.hidden-ui {
  padding-bottom: 0;
}

.app-header .app-header-ui {
  align-items: center;
  background: var(--nav-header-header-bg);
  border-bottom: 1px solid var(--nav-header-border);
  display: flex;
  justify-content: space-between;
  height: calc(var(--nav-header-height) + env(safe-area-inset-top) / 2);
  /* TODO: Spacing tokens */
  padding: 0 var(--page-gutter);
  position: fixed;
  transition: top var(--transition-speed-default);
  top: 0;
  width: 100%;
  z-index: var(--z-index-app-ui);
  padding-top: calc(env(safe-area-inset-top) / 2);
}

.app-header.collapsed .app-header-ui,
.app-layout.hidden-ui .app-header-ui,
.app-layout.hidden-header .app-header-ui {
  top: calc(var(--nav-header-height) * -1);
}

.app-header .app-header-spacer {
  height: var(--nav-header-height);
  transition: height var(--transition-speed-default);
}

.app-layout.hidden-ui .app-header-spacer,
.app-layout.hidden-header .app-header-spacer {
  height: 0;
}

.app-header .barzo-logo {
  display: block;
  height: 28px;
}

.tab-bar {
  background: var(--nav-footer-footer-bg);
  border-top: 1px solid var(--nav-footer-border);
  bottom: 0;
  color: var(--nav-footer-footer-icon-default);
  height: calc(var(--nav-footer-height) + env(safe-area-inset-bottom));
  position: fixed;
  transition: background-color var(--transition-speed-default),
    bottom var(--transition-speed-default),
    color var(--transition-speed-default);
  width: 100%;
  z-index: var(--z-index-app-ui);
  padding-bottom: calc(env(safe-area-inset-bottom) / 2);
}

.tab-bar ul {
  align-items: center;
  display: flex;
  height: var(--nav-footer-height);
  justify-content: space-between;
  list-style: none;
  margin: 0;
  padding: 0 calc(var(--page-gutter) * 2);
  width: 100%;
}

.tab-bar li {
  margin: 0;
  padding: 0;
}

.app-layout.hidden-ui .tab-bar {
  bottom: calc(var(--nav-footer-height) * -1);
}

/* TODO: Tab Bar Icon focus, hover states */

.tab-bar a,
.tab-bar button {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  display: block;
  outline: none;
  padding: 0;
  text-decoration: none;
  transition: color var(--transition-speed-default);
}

.tab-bar a:focus,
.tab-bar a:active,
.tab-bar button:focus,
.tab-bar button:active {
  outline: none;
}

.tab-bar a.active,
.tab-bar button.active {
  color: var(--nav-footer-footer-icon-active);
}

.tab-bar .bz-icon {
  display: block;
}

.tab-bar .user-avatar {
  width: 48px;
}

/**************************************************
  Icons
  */

/* TODO: BEM class naming? (booo!) */

.bz-icon,
.bz-icon.md {
  display: inline-block;
  height: var(--size-icon-md); /* Default to 'md' size */
  margin: 0;
  width: var(--size-icon-md);
}

.bz-icon.xs {
  height: var(--size-icon-xs);
  width: var(--size-icon-xs);
}

.bz-icon.sm {
  height: var(--size-icon-sm);
  width: var(--size-icon-sm);
}

.bz-icon.lg {
  height: var(--size-icon-lg);
  width: var(--size-icon-lg);
}

.bz-icon.xl {
  height: var(--size-icon-xl);
  width: var(--size-icon-xl);
}

.bz-icon.xl {
  height: var(--size-icon-xxl);
  width: var(--size-icon-xxl);
}

/**************************************************
  Buttons
  */

/* TODO: Button size options */

.bz-button,
a.bz-button {
  appearance: none;
  background: var(--button-primary-bg);
  border: none;
  border-radius: var(--button-primary-border-radius);
  box-shadow: 0 0 0 0 var(--input-border-focus);
  color: var(--button-primary-text);
  display: inline-block;
  font-size: var(--text-label-l-size);
  font-weight: var(--text-label-l-weight);
  outline: none;
  letter-spacing: var(--text-label-l-tracking);
  line-height: var(--text-label-l-line-height);
  /* TODO: Spacing tokens */
  padding: 12px 18px;
  text-align: center;
  text-decoration: none;
  transition: background-color var(--transition-speed-default),
    box-shadow var(--transition-speed-default),
    color var(--transition-speed-default);
}

/* TODO: Tokens for button focus state */
.bz-button:focus-visible {
  box-shadow: 0 0 0 2px var(--input-border-focus);
}

.bz-button:active {
  background: var(--button-primary-pressed-bg);
  color: var(--button-primary-pressed-text);
}

.bz-button:disabled,
.bz-button.disabled {
  background: var(--button-primary-disabled-bg);
  color: var(--button-primary-disabled-text);
}

.bz-button .bz-icon {
  color: var(--button-primary-default-icon-color);
  display: inline-block;
  height: 1em; /* Match font size */
  transition: color var(--transition-speed-default);
  vertical-align: -0.125em;
  width: auto;
}

.bz-button .bz-icon.icon-left {
  margin-right: 4px;
}

.bz-button .bz-icon.icon-right {
  margin-left: 4px;
}

.bz-button:active .bz-icon {
  color: var(--button-primary-pressed-icon-color);
}

.bz-button:disabled .bz-icon,
.bz-button.disabled .bz-icon {
  color: var(--button-primary-disabled-icon-color);
}

.bz-button.secondary {
  background: var(--button-secondary-bg);
  color: var(--button-secondary-text);
}

.bz-button.secondary:active {
  background: var(--button-secondary-pressed-bg);
  color: var(--button-secondary-pressed-text);
}

.bz-button.secondary:disabled,
.bz-button.secondary.disabled {
  background: var(--button-secondary-disabled-bg);
  color: var(--button-secondary-disabled-text);
}

.bz-button.secondary .bz-icon {
  color: var(--button-secondary-default-icon-color);
}

.bz-button.secondary:active .bz-icon {
  color: var(--button-secondary-pressed-icon-color);
}

.bz-button.secondary:disabled .bz-icon,
.bz-button.secondary.disabled .bz-icon {
  color: var(--button-secondary-disabled-icon-color);
}

.bz-button.tertiary {
  background: var(--button-tertiary-bg);
  color: var(--button-tertiary-text);
}

.bz-button.tertiary:active {
  background: var(--button-tertiary-pressed-bg);
  color: var(--button-tertiary-pressed-text);
}

.bz-button.tertiary:disabled,
.bz-button.tertiary.disabled {
  background: var(--button-tertiary-disabled-bg);
  color: var(--button-tertiary-disabled-text);
}

.bz-button.tertiary .bz-icon {
  color: var(--button-tertiary-default-icon-color);
}

.bz-button.tertiary:active .bz-icon {
  color: var(--button-tertiary-pressed-icon-color);
}

.bz-button.tertiary:disabled .bz-icon,
.bz-button.tertiary.disabled .bz-icon {
  color: var(--button-tertiary-disabled-icon-color);
}

.bz-button.outlined {
  background: var(--button-outlined-bg);
  border: var(--button-outlined-border-width) solid
    var(--button-outlined-border);
  padding: 11px 17px;
  color: var(--button-outlined-text);
}

.bz-button.outlined:active {
  background: var(--button-outlined-pressed-bg);
  border-color: var(--button-outlined-pressed-border);
  color: var(--button-outlined-pressed-text);
}

.bz-button.outlined:disabled,
.bz-button.outlined.disabled {
  background: var(--button-outlined-disabled-bg);
  border-color: var(--button-outlined-disabled-border);
  color: var(--button-outlined-disabled-text);
}

.bz-button.outlined .bz-icon {
  color: var(--button-outlined-default-icon-color);
}

.bz-button.outlined:active .bz-icon {
  color: var(--button-outlined-pressed-icon-color);
}

.bz-button.outlined:disabled .bz-icon,
.bz-button.outlined.disabled .bz-icon {
  color: var(--button-outlined-disabled-icon-color);
}

.bz-button.plain {
  background: var(--button-plain-bg);
  color: var(--button-plain-text);
}

.bz-button.plain:active {
  background: var(--button-plain-pressed-bg);
  color: var(--button-plain-pressed-text);
}

.bz-button.outlined:disabled,
.bz-button.outlined.disabled {
  background: var(--button-plain-disabled-bg);
  color: var(--button-plain-disabled-text);
}

.bz-button.plain .bz-icon {
  color: var(--button-plain-default-icon-color);
}

.bz-button.plain:active .bz-icon {
  color: var(--button-plain-pressed-icon-color);
}

.bz-button.plain:disabled .bz-icon,
.bz-button.plain.disabled .bz-icon {
  color: var(--button-plain-disabled-icon-color);
}

.bz-button.rounded {
  border-radius: 1000px;
}

/* Block display helper */
.bz-button.block {
  display: block;
  width: 100%;
}

/**************************************************
  Alerts
  */
.bz-alert {
  border-radius: var(--alert-border-border-radius);
  border-style: solid;
  border-width: var(--alert-border-border-width);
  font-size: var(--text-body-s-size);
  font-weight: var(--text-body-s-weight);
  letter-spacing: var(--text-body-s-tracking);
  line-height: var(--text-body-s-line-height);
  padding: 16px;
}

.bz-alert .header {
  align-items: flex-start;
  display: flex;
  gap: 8px;
}

/* TODO: bz-button sizes */
.bz-alert .btn-close {
  appearance: none;
  background: none;
  border: none;
  color: inherit;
  margin-left: auto;
  padding: 0;
}

.bz-alert .headline {
  font-size: var(--text-body-l-size);
  font-weight: var(--text-body-l-weight);
  letter-spacing: var(--text-body-l-tracking);
  line-height: var(--text-body-l-line-height);
}

.bz-alert .body :first-child {
  margin-top: 0;
}

.bz-alert .body :last-child {
  margin-bottom: 0;
}

.bz-alert.success {
  background: var(--alert-bg-success);
  border-color: var(--alert-border-success);
  color: var(--alert-text-success);
}

.bz-alert.warning {
  background: var(--alert-bg-warning);
  border-color: var(--alert-border-warning);
  color: var(--alert-text-warning);
}

.bz-alert.error {
  background: var(--alert-bg-error);
  border-color: var(--alert-border-error);
  color: var(--alert-text-error);
}

.bz-alert.information {
  background: var(--alert-bg-information);
  border-color: var(--alert-border-information);
  color: var(--alert-text-information);
}

/**************************************************
  Form Controls
  */

.bz-base-input {
  margin-bottom: var(--margin-default);
  position: relative;
}

.bz-base-input .input {
  background: var(--input-bg);
  border: 1px solid var(--input-border-default);
  border-radius: var(--form-control-border-radius);
  box-shadow: 0 0 0 0 var(--input-border-focus);
  padding: 12px;
  position: relative;
  transition: border-color var(--transition-speed-default),
    box-shadow var(--transition-speed-default);
}

.bz-base-input.has-error .input,
.bz-base-input .input.has-error {
  border-color: var(--input-border-error);
}

.bz-base-input .input:has(input:focus-visible),
.bz-base-input .input:has(select:focus-visible),
.bz-base-input .input:has(textarea:focus-visible) {
  box-shadow: 0 0 0 2px var(--input-border-focus);
}

.bz-base-input label {
  color: var(--input-text-label-color);
  font-family: var(--input-text-label-font);
  font-size: var(--input-text-label-size);
  font-weight: var(--input-text-label-weight);
  letter-spacing: var(--input-text-label-tracking);
  line-height: var(--input-text-label-line-height);
  /* Nudge label for input padding and radius */
  padding-left: 12px;
}

.bz-base-input .error-message {
  color: var(--input-text-error-color);
  font-family: var(--input-text-error-font);
  font-size: var(--input-text-error-size);
  font-weight: var(--input-text-error-weight);
  letter-spacing: var(--input-text-error-tracking);
  line-height: var(--input-text-error-line-height);
  margin-top: 4px;
  /* Nudge label for input padding and radius */
  padding-left: 12px;
}

.bz-base-input .helper {
  color: var(--input-text-helper-color);
  font-family: var(--input-text-helper-font);
  font-size: var(--input-text-helper-size);
  font-weight: var(--input-text-helper-weight);
  letter-spacing: var(--input-text-helper-tracking);
  line-height: var(--input-text-helper-line-height);
  margin-top: 4px;
  /* Nudge label for input padding and radius */
  padding-left: 12px;
}

.bz-base-input .input-text {
  background: none;
  border: none;
  border-radius: 0;
  color: var(--input-text-value-color);
  display: block;
  font-family: var(--input-text-value-font);
  font-size: var(--input-text-value-size);
  font-weight: var(--input-text-value-weight);
  letter-spacing: var(--input-text-value-tracking);
  line-height: var(--input-text-value-line-height);
  outline: none;
  padding: 0;
  width: 100%;
}

.bz-base-input .input-text::placeholder {
  color: var(--input-text-placeholder-color);
  font-family: var(--input-placeholder-value-font);
  font-size: var(--input-text-placeholder-size);
  font-weight: var(--input-text-placeholder-weight);
  letter-spacing: var(--input-text-placeholder-tracking);
  line-height: var(--input-text-placeholder-line-height);
}

.bz-base-input .bz-icon {
  color: var(--input-icon-color);
  height: var(--size-icon-sm);
  width: var(--size-icon-sm);
}

.bz-base-input.has-icon .input {
  padding-left: 46px;
}

.bz-base-input .input-icon {
  left: 12px;
  position: absolute;
  top: 12px;
}

.bz-base-input .btn-clear {
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  right: 12px;
  position: absolute;
  top: 12px;
}

.bz-base-input:not(.has-input) .btn-clear {
  display: none;
}

.bz-base-input.search-input .input {
  background: var(--searchInput-bg-default);
  border: 1px solid var(--searchInput-border-default);
  border-radius: var(--searchInput-border-radius);
  box-shadow: 0 0 0 0 var(--searchInput-border-focus);
}

.bz-base-input.search-input .input-text::placeholder {
  color: var(--searchInput-text-placeholder-color);
  font-weight: var(--searchInput-text-placeholder-weight);
}

.bz-base-input.search-input .input-text {
  color: var(--searchInput-text-value-color);
  font-weight: var(--searchInput-text-value-weight);
}

.bz-base-input.search-input.has-error .input,
.bz-base-input.search-input .input.has-error {
  border-color: var(--searchInput-border-error);
}

.bz-base-input.search-input .bz-icon {
  color: var(--searchInput-icon-color);
}

/**************************************************
  Loaders
  */

.fullscreen-loader {
  align-items: center;
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.2);
  bottom: 0;
  display: flex;
  justify-content: center;
  left: 0;
  opacity: 0;
  pointer-events: none;
  position: fixed;
  right: 0;
  transition: opacity var(--transition-speed-default);
  top: 0;
  z-index: var(--z-index-loader);
}

.fullscreen-loader.loading {
  opacity: 1;
  pointer-events: all;
}

.loading-spinner {
  width: 50px;
  aspect-ratio: 1;
  display: grid;
  border-radius: 50%;
  background: linear-gradient(
        0deg,
        rgb(255 255 255/50%) 30%,
        #0000 0 70%,
        rgb(255 255 255/100%) 0
      )
      50%/8% 100%,
    linear-gradient(
        90deg,
        rgb(255 255 255/25%) 30%,
        #0000 0 70%,
        rgb(255 255 255/75%) 0
      )
      50%/100% 8%;
  background-repeat: no-repeat;
  animation: l23 1s infinite steps(12);
}

.loading-spinner::before,
.loading-spinner::after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: inherit;
  opacity: 0.915;
  transform: rotate(30deg);
}

.loading-spinner::after {
  opacity: 0.83;
  transform: rotate(60deg);
}

@keyframes l23 {
  100% {
    transform: rotate(1turn);
  }
}

/**************************************************
  Sheets
  */

.bz-sheet {
  pointer-events: none;
  position: relative;
  z-index: var(--z-index-modal);
}

.bz-sheet .modal-shade {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.5);
  bottom: 0;
  left: 0;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: fixed;
  right: 0;
  top: 0;
  transition: opacity var(--transition-speed-default);
}

.bz-sheet .modal {
  background: var(--surfaces-primary-bg);
  border-radius: 24px 24px 0 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  left: 0;
  min-height: 40%;
  opacity: 0;
  position: fixed;
  transform: translateY(64px);
  transition: opacity var(--transition-speed-default),
    transform var(--transition-speed-default);
  width: 100%;
}

.bz-sheet.full .modal {
  height: calc(100% - 32px);
}

.bz-sheet .control-container {
  padding: 12px 0 4px;
}

.bz-sheet .control {
  background: var(--surfaces-secondary-highest);
  border-radius: 8px;
  height: 4px;
  margin: 0 auto;
  width: 64px;
}

.bz-sheet .modal .header {
  align-items: center;
  border-bottom: 1px solid var(--surfaces-primary-highest);
  display: flex;
  flex: 0 0 48px;
  padding: 0 16px;
}

.bz-sheet .modal .header .close,
.bz-sheet .modal .header .action {
  flex: 0 0 60px;
}

.bz-sheet .modal .header .btn-close {
  appearance: none;
  background: none;
  border: none;
  color: #aaa;
  /* TODO: Font token / class */
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  padding: 6px 4px;
}

.bz-sheet .modal .header .title {
  flex: 1;
  font-family: var(--text-caption-font);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  line-height: 1;
  margin: 0;
  text-align: center;
}

.bz-sheet .modal .footer {
  align-items: center;
  border-top: 1px solid var(--surfaces-primary-highest);
  display: flex;
  flex: 0 0 80px;
  justify-content: center;
  padding: 0 16px;
}

.bz-sheet .modal .body {
  flex: 1;
  padding: 24px;
  text-align: center;
}

.bz-sheet.full .modal .body {
  text-align: left;
}

.bz-sheet.open {
  pointer-events: all;
}

.bz-sheet.open .modal-shade {
  opacity: 1;
  pointer-events: all;
}

.bz-sheet.open .modal {
  opacity: 1;
  transform: translateY(0);
}

/**************************************************
  User Avatars
  */

/* TODO: Avatar button focus, hover states */

.user-avatar .container,
.user-avatar .status-ring,
.user-avatar .img-container {
  border-radius: 50%;
}

.user-avatar .container {
  /* TODO: Use a surface color token */
  background: var(--color-white-200);
  padding: 2px;
}

.user-avatar .status-ring {
  background-color: var(--status-color-inactive);
  padding: 4px;
  transition: background-color var(--transition-speed-default) ease;
}

body[data-theme="out"] .my-avatar-ui .status-ring,
.user-avatar.out .status-ring {
  background-color: var(--status-color-active);
}

.user-avatar .img-container {
  overflow: hidden;
}

.user-avatar img {
  aspect-ratio: 1 / 1;
  display: block;
  height: auto;
  margin: 0;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

/**************************************************
  Cards / Shelves
  */

.bz-shelf {
  margin-bottom: var(--margin-default);
}

.bz-shelf .shelf-title {
  font-family: var(--text-heading-m-font);
  font-size: var(--text-heading-m-size);
  font-weight: var(--text-heading-m-weight);
  letter-spacing: var(--text-heading-m-tracking);
  line-height: var(--text-heading-m-line-height);
  margin-bottom: 4px;
  padding-left: var(--page-gutter);
}

.bz-shelf .item-button {
  appearance: none;
  background: none;
  border: none;
  border-radius: 0;
  color: inherit;
  display: block;
  margin: 0;
  padding: 0;
  text-align: left;
  text-decoration: none;
}

.bz-shelf .shelf-items {
  align-items: stretch;
  display: flex;
  gap: var(--margin-default);
  overflow-x: scroll;
  padding: 0 var(--page-gutter) 8px;
}

.bz-shelf .shelf-items::-webkit-scrollbar {
  display: none;
}

.bz-shelf.snappable .shelf-items {
  scroll-padding: var(--page-gutter);
  scroll-snap-type: x mandatory;
}

.bz-shelf.snappable .shelf-item {
  scroll-snap-align: start;
}

.venue-shelf .card {
  height: 100%;
  width: 256px;
}

.bz-shelf .card {
  border: 2px solid transparent;
  transition: border-color var(--transition-speed-default);
}

.bz-shelf .shelf-item.snapped .card,
.bz-shelf .shelf-item.selected .card {
  border-color: var(--bz-c-brand-red);
}

.bz-shelf .card.venue {
  background: var(--surfaces-primary-highest);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  padding: 8px 8px 12px;
}

.bz-shelf .card.venue .hero {
  aspect-ratio: 16 / 9;
  background: url(../assets/img/banner-default.png);
  position: relative;
}

.bz-shelf .card.venue .hero img {
  display: block;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.bz-shelf .card.venue .hero .flag {
  align-items: center;
  background: var(--bz-c-brand-red);
  color: var(--color-white-100);
  display: flex;
  font-family: var(--text-caption-font);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  gap: 6px;
  letter-spacing: var(--text-caption-tracking);
  line-height: 1;
  padding: 4px 6px;
  position: absolute;
  right: 0;
  text-transform: uppercase;
  top: 16px;
}

.bz-shelf .card.venue .hero .flag .bz-icon {
  height: 12px;
  width: 12px;
}

.bz-shelf .card.venue .body {
  padding: 8px 0 0;
}

.bz-shelf .card.venue .headline {
  font-family: var(--text-heading-s-font);
  font-size: var(--text-heading-s-size);
  font-weight: var(--text-heading-s-weight);
  letter-spacing: var(--text-heading-s-tracking);
  line-height: var(--text-heading-s-line-height);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bz-shelf .card.venue .subhead {
  font-family: var(--text-body-s-font);
  font-size: var(--text-body-s-size);
  font-weight: var(--text-body-s-weight);
  letter-spacing: var(--text-body-s-tracking);
  line-height: var(--text-body-s-line-height);
}

.bz-shelf .card.venue .status-label {
  font-weight: bold;
}

.bz-shelf .card.venue .status-label.open {
  color: var(--status-color-open);
}

.bz-shelf .card.venue .status-label.closed {
  color: var(--status-color-closed);
}

.bz-shelf .card.venue .proximity {
  font-family: var(--text-body-s-font);
  font-size: var(--text-body-s-size);
  font-weight: var(--text-body-s-weight);
  letter-spacing: var(--text-body-s-tracking);
  line-height: var(--text-body-s-line-height);
}

.bz-shelf .card.venue .proximity .bz-icon {
  height: 1em;
  width: auto;
  vertical-align: -0.125em;
}

.bz-shelf .card.venue .footer {
  border-top: 1px solid var(--surfaces-secondary-highest);
  margin: 8px 0 0;
  padding: 8px 0 0;
}

.bz-shelf .card.venue .patrons {
  align-items: center;
  display: flex;
  gap: 8px;
}

.bz-shelf .card.venue .patron-label {
  font-family: var(--text-caption-font);
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  line-height: var(--text-caption-line-height);
}

.avatar-stack {
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0;
}

.avatar-stack .stack-item:not(:first-of-type) {
  margin-left: -15px;
}

.bz-shelf .card.venue .patrons .user-avatar {
  width: 40px;
}

/* TODO: Make this a percentage or prop */
.bz-shelf .card.venue .patrons .user-avatar .status-ring {
  padding: 2px;
}

.bz-shelf.user-shelf .shelf-items {
  gap: 8px;
}

.bz-shelf.user-shelf .user-avatar {
  width: 112px;
}

/**************************************************
  Drink Bank
  */

.bz-shelf .drink-bank-preview {
  align-items: center;
  background-color: var(--bz-c-brand-red);
  background-image: url(../assets/img/barzo-bg-small.png);
  background-position: center center;
  background-size: cover;
  /* TODO: Shared class for home/shelf/module elements with shadow */
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.1);
  color: var(--color-white-100);
  border-radius: 0 0 4px 4px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  padding: 24px 16px;
  text-align: center;
}

.bz-shelf .drink-bank-preview .dr-badge {
  display: block;
  height: auto;
  width: 100%;
}

.bz-shelf .drink-bank-preview .drinks-left .count {
  border: 3px solid var(--color-white-100);
  border-radius: 1000px;
  font-size: 48px;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 8px;
  padding: 4px 8px;
}

.bz-shelf .drink-bank-preview .drinks-left .label {
  font-size: 18px;
  font-weight: 900;
  line-height: 1.1;
}

.bz-shelf .drink-bank-preview .reset {
  font-size: 12px;
  line-height: 1.1;
}

.bz-shelf .drink-bank-preview .reset .days {
  display: block;
  font-size: 24px;
  font-weight: bold;
}

/**************************************************
  Profile Pages
  */

.profile-view {
  /* Spacing for Action Bar */
  padding-bottom: calc(80px + env(safe-area-inset-bottom) / 2);
}

.profile-view .hero {
  /* DOM sets theme=out on hero div */
  color: var(--text-color-primary);
  position: relative;
}

.profile-view .hero img.banner-img {
  aspect-ratio: 5 / 4;
  display: block;
  object-fit: cover;
  object-position: center center;
  width: 100%;
}

.profile-view .header-actions {
  display: flex;
  justify-content: space-between;
  left: 0;
  /* Let the back button shift further left */
  padding: calc(16px + env(safe-area-inset-top) / 2) 16px 16px 0;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: var(--z-index-modal);
}

.profile-view .btn-close .bz-icon {
  color: #fff;
}

.profile-view .btn-close:active {
  background: none;
}

.profile-view .header-actions .profile-actions {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.profile-view .hero-protection {
  background: linear-gradient(
    to bottom,
    rgba(0,0,0,0.75) 0%,rgba(0,0,0,0) 15%,rgba(0,0,0,0) 65%,rgba(0,0,0,1) 100%
  );
  bottom: 0;
  height: 100%;
  left: 0;
  opacity: 0.7;
  position: absolute;
  width: 100%;
}

/* TODO: Make profile-id reusable for any type (venue, event, user) in any UI (profile, message) */

.profile-view .profile-id {
  bottom: 0;
  padding: 16px;
  position: absolute;
  width: 100%;
}

.profile-view .profile-id .headline {
  font-size: var(--text-label-l-size);
  font-weight: var(--text-label-l-weight);
  letter-spacing: var(--text-label-l-tracking);
  line-height: var(--text-label-l-line-height);
}

.profile-view .profile-id .subhead {
  font-size: var(--text-subheading-m-size);
  font-weight: var(--text-subheading-m-weight);
  letter-spacing: var(--text-subheading-m-tracking);
  line-height: var(--text-subheading-m-line-height);
}

.profile-view .status-label {
  border-radius: 32px;
  display: inline-block;
  font-size: var(--text-caption-size);
  font-weight: var(--text-caption-weight);
  letter-spacing: var(--text-caption-tracking);
  line-height: 1;
  padding: 4px 8px;
}

.profile-view .status-label.open {
  background-color: var(--status-color-open);
}

.profile-view .status-label.closed {
  background-color: var(--status-color-closed);
}

.profile-view .profile-section {
  border-top: 4px solid var(--surfaces-primary-highest);
  padding: 16px 0;
}

.profile-view .profile-section .section-header,
.profile-view .profile-section .section-body {
  padding: 0 16px;
}

.profile-view .profile-section .section-header {
  margin-bottom: 16px;
}

.profile-view .attribute-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-view .venue-staff .user-avatar {
  width: 88px;
}

.profile-view .profile-section .section-subhead {
  font-size: var(--text-subheading-l-size);
  font-weight: var(--text-subheading-l-weight);
  letter-spacing: var(--text-subheading-l-tracking);
  line-height: 1;
}

.profile-view .status.open {
  color: var(--status-color-open);
}

.profile-view .profile-section .section-title {
  font-size: var(--text-heading-s-size);
  font-weight: var(--text-heading-s-weight);
  letter-spacing: var(--text-heading-s-tracking);
  line-height: 1;
}

.profile-view .description {
  margin: 0;
}

.profile-view .features-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0;
  padding: 0;
}

.profile-view .features-list .bz-button {
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  padding: 8px 10px;
}

.hours-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.hours-list .hours-item {
  border-bottom: 1px solid var(--surfaces-primary-highest);
  display: flex;
  justify-content: space-between;
  padding: 4px 0;
}

.hours-list .hours-item:last-child {
  border: none;
  margin-bottom: 0;
}

.hours-list .hours-item.today {
  font-weight: bold;
}

.profile-view .activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.profile-view .activity-list .activity-item {
  display: flex;
  gap: 8px;
  padding: 0 0 16px;
}

.profile-view .activity-list .activity-avatar {
  flex: 0 0 40px;
  width: 40px;
}

.profile-view .activity-list .activity-details {
  font-size: var(--text-body-s-size);
  font-weight: var(--text-body-s-weight);
  letter-spacing: var(--text-body-s-tracking);
  line-height: var(--text-body-s-line-height);
}

.profile-view .activity-list .activity-details .timestamp {
  color: var(--text-color-tertiary);
  font-size: var(--text-subheading-s-size);
  font-weight: var(--text-subheading-s-weight);
  letter-spacing: var(--text-subheading-s-tracking);
  line-height: var(--text-subheading-s-line-height);
}

.profile-view .action-bar:has(#redeemBtn) {
  background: linear-gradient(
    to bottom,
    rgba(50, 50, 50, 0),
    rgba(50, 50, 50, 0.4)
  );
  bottom: 0;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom) / 2);
  position: fixed;
  width: 100%;
}

/**************************************************
  Temp User Nav Styles
  */

.user-nav-container {
  height: 100vh;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-index-app-ui);
}

.user-nav-container .user-nav-shade {
  backdrop-filter: blur(2px);
  background: rgba(0, 0, 0, 0.25);
  height: 100vh;
  left: 0;
  opacity: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: var(--z-index-app-ui);
  transition: opacity var(--transition-speed-default);
}

.user-nav-container .user-nav {
  background: var(--surfaces-primary-bg);
  height: 100vh;
  padding: 24px;
  position: fixed;
  right: 0;
  top: 0;
  transform: translateX(100%);
  transition: transform var(--transition-speed-default);
  width: 85%;
  z-index: var(--z-index-app-ui);
}

.user-nav-container.open {
  pointer-events: all;
}

.user-nav-container.open .user-nav-shade {
  opacity: 1;
}

.user-nav-container.open .user-nav {
  transform: translateX(0);
}

.user-nav-container .user-nav .user-meta {
  border-bottom: 1px solid var(--surfaces-secondary-highest);
  padding-bottom: 16px;
}

.user-nav-container .user-nav .user-id {
  /* align-items: center;
  display: flex;
  gap: 8px; */
}

#pro-code-container {
  padding-top: 24px;
}

#pro-code-container .pro-code-title {
  margin-bottom: 8px;
}

.user-nav-container .user-nav .user-avatar {
  width: 64px;
}

.user-nav-container .user-nav .user-id .fullname,
.user-nav-container .user-nav .user-id .nickname {
  line-height: 1.1;
  margin-bottom: 2px;
}

.user-nav-container .user-nav .user-name {
  padding-top: 4px;
}

.user-nav-container .user-name #pro-logo {
  display: inline-block;
  margin: 0;
  transform: translateY(-2px);
  width: 32px;
}

.user-nav-container .user-links {
  list-style: none;
  margin: 16px 0;
  padding: 0;
}

.user-nav-container .user-links > li {
  padding: 8px 0;
}

.user-nav-container .user-links .user-link {
  background: none;
  border: none;
  font-weight: bold;
  color: inherit;
}

.user-nav-container .user-links .user-link svg {
  margin-right: 4px;
  vertical-align: -0.125em;
}

.user-nav .pro-code {
  display: flex;
  gap: 8px;
}

.user-nav .pro-code .code-key {
  align-items: center;
  background: var(--surfaces-primary-highest);
  border-radius: 4px;
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}

.user-nav .pro-code .code-key .bz-icon {
  display: block;
}

.user-nav .pro-code .code-key .color-swatch {
  border-radius: 100px;
  height: 80px;
  width: 80px;
}

.user-nav .pro-code .code-key .color-blue {
  background: blue;
}

.user-nav .pro-code .code-key .label {
  display: block;
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}