{"version":3,"sources":["webpack://_N_E/src/components/ReadingGoalPage/OptionButton.module.scss","webpack://_N_E/src/styles/_theme.scss","webpack://_N_E/src/components/ReadingGoalPage/ReadingGoalPage.module.scss","webpack://_N_E/src/styles/_breakpoints.scss","webpack://_N_E/src/components/dls/Forms/Combobox/ComboboxItem/ComboboxItem.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/ComboboxItems/ComboboxItems.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Icons/CaretInputIcon.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Icons/ClearInputIcon.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Icons/SearchInputIcon.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Tag/Tag.module.scss","webpack://_N_E/src/components/dls/Forms/Combobox/Combobox.module.scss","webpack://_N_E/src/components/ReadingGoal/ReadingGoalInput/ReadingGoalInput.module.scss","webpack://_N_E/src/components/dls/Forms/Input/Input.module.scss","webpack://_N_E/src/components/dls/Forms/Select/Select.module.scss","webpack://_N_E/src/components/Error/Error.module.scss","webpack://_N_E/src/components/dls/Popover/Popover.module.scss","webpack://_N_E/src/components/dls/Progress/Progress.module.scss","webpack://_N_E/src/pages/index.module.scss","webpack://_N_E/src/styles/_utility.scss","webpack://_N_E/src/pages/reading-goal/reading-goal.module.scss"],"names":[],"mappings":"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","file":"static/css/7b6b2fef6540b858.css","sourcesContent":["@use \"src/styles/utility\";\n@use \"src/styles/theme\";\n\n.icon {\n  $size: calc(1.3 * var(--spacing-mega));\n  width: $size;\n  height: $size;\n  margin-inline-end: var(--spacing-large);\n  flex-shrink: 0;\n}\n\n.button {\n  position: relative;\n  box-sizing: border-box;\n  display: flex;\n  align-items: center;\n  font-size: calc(1.4 * var(--font-size-large));\n  width: 100%;\n  flex: 1;\n  padding-inline: calc(1.5 * var(--spacing-large));\n  padding-block: calc(var(--spacing-large));\n  background-color: transparent;\n  border: 1px solid var(--color-borders-hairline);\n  color: var(--color-background-inverse);\n  border-radius: var(--border-radius-rounded);\n  text-transform: capitalize;\n  cursor: pointer;\n\n  @media (hover: hover) {\n    &:hover {\n      background-color: var(--color-background-alternative-faded);\n    }\n  }\n}\n\n.textContainer {\n  display: flex;\n  flex-direction: column;\n  text-align: initial;\n  font-size: var(--font-size-small);\n  gap: var(--spacing-xxsmall);\n}\n\n.title {\n  font-size: var(--font-size-large);\n  font-weight: var(--font-weight-medium);\n  color: var(--color-text);\n}\n\n.description {\n  font-size: var(--font-size-normal);\n  color: var(--color-text-faded);\n}\n\n.selected {\n  background-color: var(--color-background-alternative-faded);\n  border-color: var(--color-success-medium);\n  color: var(--color-success-medium);\n\n  @include theme.light {\n    color: var(--color-success-deep);\n  }\n\n  @include theme.sepia {\n    border-color: var(--color-success-medium);\n    background-color: var(--color-background-alternative-faint);\n  }\n\n  @include theme.dark {\n    background-color: var(--color-background-alternative-faded);\n  }\n\n  @media (hover: hover) {\n    &:hover {\n      background-color: var(--color-background-alternative-faint);\n      @include theme.dark {\n        background-color: var(--color-background-alternative-faded);\n      }\n    }\n  }\n}\n\n.recommended {\n  background-color: var(--color-success-medium);\n\n  @include theme.light {\n    color: var(--color-background-default);\n  }\n\n  @include theme.dark {\n    color: var(--color-background-inverse);\n  }\n\n  @include theme.sepia {\n    color: var(--color-background-default);\n  }\n\n  border-radius: var(--border-radius-pill);\n  padding-inline: var(--spacing-small);\n  padding-block: var(--spacing-micro);\n  font-size: var(--font-size-small);\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-end: 0;\n  transform: translate(-30%, -50%);\n}\n","@mixin dark {\n  @media (prefers-color-scheme: dark) {\n    @content;\n  }\n  [data-theme=\"dark\"] & {\n    @content;\n  }\n}\n\n@mixin light {\n  @media (prefers-color-scheme: light) {\n    @content;\n  }\n  [data-theme=\"light\"] & {\n    @content;\n  }\n}\n\n@mixin sepia {\n  [data-theme=\"sepia\"] & {\n    @content;\n  }\n}\n","@use \"src/styles/utility\";\n@use \"src/styles/breakpoints\";\n\n.tabContainer {\n  margin-block: var(--spacing-large);\n  min-height: 80vh;\n  height: 100%;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  flex-direction: row;\n  gap: calc(2 * var(--spacing-mega));\n\n  @include breakpoints.smallerThanDesktop {\n    flex-direction: column;\n    gap: var(--spacing-mega);\n  }\n}\n\n.optionsContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--spacing-large);\n  margin-block: var(--spacing-medium);\n  flex: 1;\n\n  @include breakpoints.smallerThanDesktop {\n    width: 100%;\n  }\n}\n\n.titleContainer {\n  flex: 1;\n\n  @include breakpoints.smallerThanDesktop {\n    width: 100%;\n    text-align: center;\n    margin-block-start: calc(2 * var(--spacing-mega));\n  }\n}\n\n.title {\n  font-size: var(--font-size-jumbo);\n  font-weight: var(--font-weight-bold);\n}\n\n.subtitle {\n  font-size: var(--font-size-large);\n  margin-block-start: var(--spacing-medium);\n  color: var(--color-text-faded);\n}\n\n.navigationContainer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: var(--spacing-medium);\n\n  // margin-block: var(--spacing-medium);\n}\n\n$circle-size: var(--spacing-small);\n$circle-spacing: var(--spacing-xxsmall);\n$circle-border: 4px;\n\n.previewWrapper {\n  position: relative;\n  $spacing: calc($circle-size + $circle-spacing + $circle-border);\n  padding-inline-start: $spacing;\n  width: calc(100% - $spacing);\n}\n\n.dayPreview {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: var(--spacing-large);\n  border-radius: var(--border-radius-rounded);\n  background-color: var(--color-background-alternative-faded);\n  font-size: var(--font-size-large);\n\n  &.lastDay {\n    background: transparent;\n  }\n\n  h3 {\n    font-size: var(--font-size-xlarge);\n    font-weight: var(--font-weight-bold);\n  }\n\n  &::before {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: 0;\n    transform: translateX(calc(-100% - $circle-spacing));\n\n    [dir=\"rtl\"] & {\n      transform: translateX(calc(100% + $circle-spacing));\n    }\n\n    width: $circle-size;\n    height: $circle-size;\n    border: $circle-border solid var(--color-success-medium);\n    border-radius: var(--border-radius-circle);\n    background-color: var(--color-background-default);\n  }\n\n  &::after {\n    content: \"\";\n    position: absolute;\n    inset-inline-start: 0;\n    // we need to translate the line directly under the circle and in the middle of it\n    transform: translate(\n      calc(\n        -100% + ($circle-spacing * -1) + ($circle-size + $circle-border) / -2\n      ),\n      calc(50% + ($circle-size + $circle-border) / 2)\n    );\n\n    [dir=\"rtl\"] & {\n      transform: translate(\n        calc(100% + $circle-spacing + ($circle-size + $circle-border) / 2),\n        calc(50% + ($circle-size + $circle-border) / 2)\n      );\n    }\n\n    width: 3px;\n    height: 100%;\n    background-color: var(--color-success-medium);\n  }\n\n  &:last-of-type {\n    &::after {\n      display: none !important;\n    }\n  }\n}\n\n.rangePreview {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-end;\n}\n\n.rangeInputContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--spacing-medium);\n  margin-block-end: var(--spacing-large);\n\n  & > div {\n    flex: 1;\n  }\n}\n\n.inputContainer {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.input {\n  width: 100%;\n\n  > select {\n    width: 100%;\n  }\n}\n\n.label {\n  font-size: var(--font-size-large);\n  font-weight: var(--font-weight-bold);\n  margin-block-end: var(--spacing-small);\n}\n","// For usage see: https://medium.com/codeartisan/breakpoints-and-media-queries-in-scss-46e8f551e2f2\n$breakpoints-mobileS: 320px;\n$breakpoints-mobileM: 375px;\n$breakpoints-mobileL: 425px;\n$breakpoints-tablet: 768px;\n$breakpoints-desktop: 1024px;\n\n@mixin mobileS {\n  @media only screen and (min-width: $breakpoints-mobileS) {\n    @content;\n  }\n}\n\n@mixin smallerThanMobileS {\n  @media only screen and (max-width: $breakpoints-mobileS) {\n    @content;\n  }\n}\n\n@mixin mobileM {\n  @media only screen and (min-width: $breakpoints-mobileM) {\n    @content;\n  }\n}\n\n@mixin smallerThanMobileM {\n  @media only screen and (max-width: $breakpoints-mobileM) {\n    @content;\n  }\n}\n\n@mixin mobileL {\n  @media only screen and (min-width: $breakpoints-mobileL) {\n    @content;\n  }\n}\n\n@mixin smallerThanMobileL {\n  @media only screen and (max-width: $breakpoints-mobileL) {\n    @content;\n  }\n}\n\n@mixin tablet {\n  @media only screen and (min-width: $breakpoints-tablet) {\n    @content;\n  }\n}\n\n@mixin smallerThanTablet {\n  @media only screen and (max-width: $breakpoints-tablet) {\n    @content;\n  }\n}\n\n@mixin desktop {\n  @media only screen and (min-width: $breakpoints-desktop) {\n    @content;\n  }\n}\n\n@mixin smallerThanDesktop {\n  @media only screen and (max-width: $breakpoints-desktop) {\n    @content;\n  }\n}\n",".input {\n  display: none;\n}\n\n.itemLabel {\n  cursor: pointer;\n}\n\n.itemContainer {\n  color: var(--color-text-default);\n  padding-block-start: var(--spacing-xsmall);\n  padding-block-end: var(--spacing-xsmall);\n  padding-inline-start: var(--spacing-small);\n  padding-inline-end: var(--spacing-small);\n}\n\n.enabledItem {\n  cursor: pointer;\n  &:hover {\n    background: var(--color-background-alternative-medium);\n  }\n}\n.disabledItem {\n  color: var(--color-text-faded);\n}\n\n.checkedItem {\n  font-weight: var(--font-weight-bold);\n  background: var(--color-background-alternative-medium);\n}\n\n.prefix {\n  pointer-events: none;\n  display: flex;\n  align-items: center;\n  padding-inline-end: var(--spacing-xsmall);\n  > svg {\n    width: var(--spacing-small);\n    height: var(--spacing-small);\n  }\n}\n\n.labelContainer {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n}\n\n.prefixContainer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n}\n\n.suffixContainer {\n  background: var(--color-primary-medium);\n  border-radius: var(--border-radius-pill);\n  padding-block-start: var(--spacing-micro);\n  padding-block-end: var(--spacing-micro);\n  padding-inline-start: var(--spacing-micro);\n  padding-inline-end: var(--spacing-micro);\n  color: var(--color-primary-deep);\n  text-transform: uppercase;\n  font-size: var(--font-size-xsmall);\n}\n","$webkit-thumb-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12);\n\n.comboboxBodyContainer {\n  position: absolute;\n  inset-inline: 0;\n  inset-block-start: 100%;\n  margin-block-start: var(--spacing-micro);\n  border-radius: var(--border-radius-default);\n  box-shadow: var(--shadow-large);\n  &.fixedWidth {\n    width: calc(8 * var(--spacing-mega));\n  }\n  z-index: var(--z-index-dropdown);\n  transition: var(--transition-fast);\n  background-color: var(--color-background-default);\n  visibility: hidden;\n  opacity: 0;\n  pointer-events: none;\n  font-size: var(--font-size-normal);\n}\n\n.largeComboboxBodyContainer {\n  font-size: var(--font-size-large);\n}\n\n.openedComboboxBodyContainer {\n  visibility: visible;\n  opacity: 1;\n  pointer-events: auto;\n}\n\n.itemsContainer {\n  border-radius: var(--border-radius-default);\n  overflow: hidden;\n  max-height: calc(5 * var(--spacing-mega));\n  overflow-y: scroll;\n\n  // Hack to show the scrollbar on OSX, otherwise the scrollbar is hidden and the component does not indicate scrollability\n  &::-webkit-scrollbar {\n    -webkit-appearance: none;\n    width: var(--spacing-xxsmall);\n  }\n\n  &::-webkit-scrollbar-thumb {\n    border-radius: var(--border-radius-default);\n    background-color: var(--color-background-backdrop);\n    box-shadow: $webkit-thumb-shadow;\n  }\n}\n",".caretIconButton {\n  width: var(--spacing-medium);\n  height: var(--spacing-medium);\n  position: absolute;\n  inset-inline-end: var(--spacing-medium);\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  color: var(--color-background-alternative-deep);\n  svg {\n    transition: var(--transition-fast);\n  }\n  cursor: pointer;\n}\n\n.openedCaretIconButton {\n  svg {\n    transform: rotate(180deg);\n    transition: var(--transition-fast);\n  }\n}\n",".clearIconContainer {\n  user-select: none;\n  background: none;\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--spacing-small);\n  height: var(--spacing-small);\n  color: var(--color-background-alternative-deep);\n  position: absolute;\n  inset-inline-end: var(--spacing-medium);\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  outline: none;\n  margin-block-start: 0;\n  margin-inline-end: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  padding-block-start: 0;\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n  border: 0;\n  box-sizing: border-box;\n  font: inherit;\n  font-size: 100%;\n  vertical-align: baseline;\n  text-decoration: none;\n  cursor: pointer;\n}\n\n.icon svg {\n  display: inline-block;\n  width: var(--spacing-small);\n  height: var(--spacing-small);\n  overflow: hidden;\n}\n",".iconContainer {\n  position: absolute;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  z-index: 1;\n  display: inline-block;\n  width: var(--spacing-small);\n  height: var(--spacing-small);\n  color: var(--color-background-alternative-deep);\n  user-select: none;\n}\n\n.icon svg {\n  display: flex;\n  align-items: center;\n  width: var(--spacing-small);\n  height: var(--spacing-small);\n  overflow: hidden;\n}\n\n.selectSearch {\n  inset-inline-start: var(--spacing-medium);\n}\n",".item {\n  position: relative;\n  display: flex;\n  flex: none;\n  justify-content: center;\n  align-items: center;\n  box-sizing: border-box;\n  max-width: 100%;\n  margin-block-start: var(--spacing-micro);\n  margin-block-end: var(--spacing-micro);\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n  background: var(--color-background-alternative-medium);\n  border-radius: var(--border-radius-default);\n  user-select: none;\n  margin-inline-end: var(--spacing-xxsmall);\n  padding-inline-end: var(--spacing-xsmall);\n  padding-inline-start: var(--spacing-xsmall);\n  overflow: hidden;\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  font-size: var(--font-size-normal);\n}\n\n.largeItem {\n  font-size: var(--font-size-large);\n}\n\n.itemContent {\n  display: inline-block;\n  margin-inline-end: var(--spacing-micro);\n  overflow: hidden;\n  white-space: pre;\n  text-overflow: ellipsis;\n  padding-block-start: var(--spacing-xxsmall);\n  padding-block-end: var(--spacing-xxsmall);\n  padding-inline-start: var(--spacing-xxsmall);\n  padding-inline-end: var(--spacing-xxsmall);\n}\n\n.itemRemove {\n  cursor: pointer;\n  svg {\n    width: var(--spacing-xsmall);\n    height: var(--spacing-xsmall);\n  }\n}\n",".label {\n  padding-block-start: var(--spacing-micro);\n  padding-block-end: var(--spacing-micro);\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n}\n\n.disabledSearch,\n.disabledSearch * {\n  pointer-events: none;\n  cursor: not-allowed;\n}\n\n.comboboxContainer {\n  position: relative;\n  max-width: 100%;\n  &.fixedWidth {\n    width: calc(8 * var(--spacing-mega));\n  }\n}\n\n.enabled {\n  cursor: text;\n}\n\n.select {\n  box-sizing: border-box;\n  margin-block-start: 0;\n  margin-inline-end: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  padding-block-start: 0;\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n  position: relative;\n  display: inline-block;\n  width: 100%;\n}\n\n.selector {\n  padding-block-start: var(--spacing-micro);\n  padding-block-end: var(--spacing-micro);\n  padding-inline-start: var(--spacing-xsmall);\n  padding-inline-end: var(--spacing-xsmall);\n  position: relative;\n  background-color: var(--color-background-default);\n  border: 1px solid var(--color-borders-hairline);\n  border-radius: var(--border-radius-default);\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  padding-block-start: 0;\n  padding-block-end: 0;\n  padding-inline-start: var(--spacing-mega);\n  padding-inline-end: var(--spacing-mega);\n}\n\n.activeSelector {\n  border: 1px solid var(--color-primary-medium);\n}\n.selector:not(.disabledSelector):not(.hasError) {\n  &:hover {\n    border: 1px solid var(--color-primary-medium);\n  }\n}\n.hasError {\n  border: 1px solid var(--color-error-medium);\n}\n\n.disabledSelector {\n  background: var(--color-background-neutral-grey);\n  cursor: not-allowed;\n}\n\n.placeholder {\n  position: absolute;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  flex: 1;\n  overflow: hidden;\n  color: var(--color-text-faded);\n  white-space: nowrap;\n  text-overflow: ellipsis;\n  pointer-events: none;\n  max-width: 80%;\n}\n\n.overflow {\n  position: relative;\n  display: flex;\n  flex: auto;\n  flex-wrap: wrap;\n  max-width: 100%;\n  align-items: center;\n}\n\n.multiSelectSearchInput {\n  color: var(--color-text-default);\n  margin-block-start: 0;\n  margin-inline-end: 0;\n  margin-block-end: 0;\n  margin-inline-start: 0;\n  padding-block-start: 0;\n  padding-block-end: 0;\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n  background: 0 0;\n  border: none;\n  outline: none;\n  appearance: none;\n  width: 100%;\n}\n\n.smallSearchInput {\n  height: var(--spacing-mega);\n}\n.mediumSearchInput {\n  height: calc(2 * var(--spacing-large));\n}\n.largeSearchInput {\n  height: calc(3 * var(--spacing-medium));\n}\n\n.overflowItem {\n  flex: none;\n  align-self: center;\n  max-width: 100%;\n}\n\n.tagContainer {\n  max-width: calc(100% - var(--spacing-xxsmall));\n}\n\n.search {\n  position: relative;\n  max-width: 100%;\n  width: var(--spacing-xxsmall);\n}\n\n.fullWidth {\n  width: 100%;\n}\n",".rangeInputContainer {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  gap: var(--spacing-medium);\n  margin-block-end: var(--spacing-large);\n\n  & > div {\n    flex: 1;\n  }\n}\n\n.inputContainer {\n  display: flex;\n  width: 100%;\n  flex-direction: column;\n  justify-content: center;\n}\n\n.fullWidth {\n  width: 100%;\n}\n\n.input {\n  > select {\n    width: 100%;\n  }\n}\n\n.label {\n  font-size: var(--font-size-large);\n  font-weight: var(--font-weight-bold);\n  margin-block-end: var(--spacing-small);\n}\n","@use \"src/styles/theme\";\n\n.container {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  &.fixedWidth {\n    width: calc(8 * var(--spacing-mega));\n  }\n  &.disabled,\n  &.disabled * {\n    background: var(--color-background-alternative-medium);\n    pointer-events: none;\n    cursor: not-allowed;\n  }\n  border: 1px solid var(--color-borders-hairline);\n  &.error {\n    border-color: var(--color-error-deep);\n  }\n  &.success {\n    border-color: var(--color-success-medium);\n  }\n  &.warning {\n    border-color: var(--color-warning-medium);\n  }\n  border-radius: var(--border-radius-rounded);\n  padding-inline: var(--spacing-small);\n}\n\n.main {\n  padding-inline: var(--spacing-xsmall);\n  padding-block: var(--spacing-xsmall);\n\n  & .input {\n    font-size: var(--font-size-large);\n    color: var(--color-text-default);\n    font-weight: var(--font-weight-semibold);\n  }\n}\n\n.rtlInput {\n  [dir=\"rtl\"] & {\n    direction: rtl;\n  }\n}\n\n.smallContainer {\n  height: var(--spacing-mega);\n}\n.mediumContainer {\n  height: calc(2 * var(--spacing-large));\n}\n.largeContainer {\n  height: calc(3 * var(--spacing-medium));\n}\n\n.label {\n  padding-block-start: var(--spacing-micro);\n  padding-block-end: var(--spacing-micro);\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n}\n\n.input {\n  padding: 0;\n  margin-block-start: var(--spacing-micro);\n  margin-inline-end: var(--spacing-micro);\n  margin-block-end: var(--spacing-micro);\n  margin-inline-start: var(--spacing-micro);\n  border: 0;\n  height: 80%;\n  width: 100%;\n  font-size: var(--font-size-normal);\n  color: var(--color-text-default);\n  background: transparent;\n  &:focus {\n    outline: none;\n  }\n  &:disabled {\n    background: none;\n  }\n  &.error {\n    color: var(--color-error-deep);\n  }\n  &.success {\n    color: var(--color-success-medium);\n  }\n  &.warning {\n    color: var(--color-warning-medium);\n  }\n}\n\n@mixin prefixSuffixContainer {\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  justify-content: space-between;\n  height: 100%;\n}\n\n.clearContainer {\n  @include prefixSuffixContainer;\n  padding-block-start: 0;\n  padding-block-end: 0;\n  padding-inline-start: var(--spacing-micro);\n  padding-inline-end: var(--spacing-micro);\n  border-start-end-radius: var(--border-radius-default);\n  border-end-end-radius: var(--border-radius-default);\n}\n\n.prefixSuffixContainer {\n  @include prefixSuffixContainer;\n  padding-block-start: 0;\n  padding-block-end: 0;\n  color: var(--color-text-faded);\n\n  > svg {\n    width: var(--spacing-large);\n  }\n}\n\n.prefix {\n  border-start-start-radius: var(--border-radius-default);\n  border-end-start-radius: var(--border-radius-default);\n  padding-inline-start: var(--spacing-xsmall);\n  padding-inline-end: var(--spacing-xxsmall);\n}\n\n.suffix {\n  border-inline-start: 1px solid var(--color-background-alternative-deep);\n  border-start-end-radius: var(--border-radius-default);\n  border-end-end-radius: var(--border-radius-default);\n  background: var(--color-background-alternative-medium);\n\n  padding-inline-start: var(--spacing-xxsmall);\n  padding-inline-end: var(--spacing-xsmall);\n}\n",".container {\n  appearance: none;\n  display: inline-flex;\n  align-items: center;\n  outline: none;\n  text-transform: uppercase;\n  user-select: none;\n  position: relative;\n  overflow: hidden;\n  border-radius: var(--border-radius-default);\n  white-space: nowrap;\n  line-height: 0;\n}\n\n.withBackground {\n  background: var(--color-background-alternative-faded);\n}\n\n.defaultStyledContainer {\n  padding: calc(0.5 * var(--spacing-xxsmall));\n  box-sizing: border-box;\n}\n\n.smallContainer {\n  height: var(--spacing-mega);\n}\n.mediumContainer {\n  height: calc(2 * var(--spacing-large));\n}\n.largeContainer {\n  height: calc(3 * var(--spacing-medium));\n}\n\n.disabledContainer {\n  background-color: var(--color-background-alternative-medium);\n}\n\n.arrow {\n  width: var(--spacing-mega);\n  height: 100%;\n  position: absolute;\n  inset-inline-end: 0;\n  pointer-events: none;\n  display: flex;\n  background: transparent;\n  -webkit-box-align: center;\n  align-items: center;\n  -webkit-box-pack: center;\n  justify-content: center;\n\n  .withBackground & {\n    background: var(--color-background-alternative-faded);\n  }\n\n  > svg {\n    color: currentcolor;\n  }\n}\n\n.disabledArrow {\n  box-shadow: none;\n  background-color: var(--color-background-alternative-medium);\n}\n\n.select {\n  appearance: none;\n  height: 100%;\n  border: none;\n  box-shadow: none;\n  color: var(--color-text-default);\n  background: transparent;\n  font-size: var(--font-size-normal);\n  text-transform: none;\n  text-rendering: initial;\n}\n\n.defaultStyledSelect {\n  padding-block-start: 0;\n  padding-block-end: 0;\n  padding-inline-start: var(--spacing-xxsmall);\n  padding-inline-end: var(--spacing-xxsmall);\n}\n\n.disabledSelect {\n  background-color: var(--color-background-alternative-medium);\n  cursor: not-allowed;\n  color: var(--color-primary-default);\n}\n",".container {\n  text-align: center;\n  padding-block-start: var(--spacing-xsmall);\n  padding-block-end: var(--spacing-xsmall);\n  padding-inline-start: var(--spacing-xsmall);\n  padding-inline-end: var(--spacing-xsmall);\n  > button {\n    margin-block-start: 0;\n    margin-block-end: 0;\n    margin-inline-start: auto;\n    margin-inline-end: auto;\n  }\n}\n\n.text {\n  text-align: center;\n  padding-block-end: var(--spacing-xsmall);\n}\n",".container {\n  margin-block-start: var(--spacing-micro);\n  margin-block-end: var(--spacing-micro);\n  margin-inline-start: 0;\n  margin-inline-end: 0;\n}\n\n.trigger {\n  all: unset;\n  display: inline-block;\n}\n\n.content {\n  border-radius: var(--border-radius-default);\n  padding-block-start: var(--spacing-xsmall);\n  padding-block-end: var(--spacing-xsmall);\n  padding-inline-start: var(--spacing-xsmall);\n  padding-inline-end: var(--spacing-xsmall);\n  background-color: var(--color-background-default);\n  box-shadow: var(--shadow-normal);\n  & > span {\n    fill: var(--color-background-default);\n  }\n}\n\n.tooltipContent {\n  padding-block-start: var(--spacing-xxsmall);\n  padding-block-end: var(--spacing-xxsmall);\n  padding-inline-start: var(--spacing-xxsmall);\n  padding-inline-end: var(--spacing-xxsmall);\n  color: var(--color-text-inverse);\n  background-color: var(--color-background-inverse);\n  text-align: center;\n  box-shadow: none;\n  & > span {\n    fill: var(--color-background-inverse);\n  }\n}\n",".progressRoot {\n  position: relative;\n  overflow: hidden;\n  background-color: var(--color-background-alternative-faint);\n  border-radius: var(--border-radius-pill);\n  width: 100%;\n\n  /* Fix overflow clipping in Safari */\n  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */\n  transform: translateZ(0);\n}\n\n.progressSmall {\n  height: var(--spacing-medium);\n}\n\n.progressMedium {\n  height: var(--spacing-large);\n}\n\n.progressLarge {\n  height: var(--spacing-mega);\n}\n\n.progressIndicator {\n  background-color: var(--color-success-medium);\n  width: 100%;\n  height: 100%;\n  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);\n}\n","@use \"src/styles/breakpoints\";\n@use \"src/styles/utility\";\n\n$list-max-width: 80rem;\n\n.pageContainer {\n  padding-block-end: var(--spacing-small);\n  padding-inline-start: 0;\n  padding-inline-end: 0;\n}\n\n.loadingContainer {\n  min-height: 70vh;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.flow > .flowItem {\n  margin-block-start: calc(1.5 * var(--spacing-medium));\n\n  @include breakpoints.tablet {\n    margin-block-start: calc(2 * var(--spacing-medium));\n  }\n}\n\n.additionalVerticalGap {\n  padding-block: var(--spacing-medium);\n}\n\n.flowItem {\n  @include utility.pageContainer();\n  margin-block-start: 0;\n  margin-block-end: 0;\n  margin-inline-start: auto;\n  margin-inline-end: auto;\n\n  --flow-side-spacing: var(--spacing-small);\n  padding-inline-start: var(--flow-side-spacing);\n  padding-inline-end: var(--flow-side-spacing);\n\n  /**\n  * On mobile, a few components can't have padding at parent level.\n  * For example the QuickLinks, Recently Read, etc. Because they are horizontally scrollable\n  * So, we make padding horizontal 0 the parent level, and pass the `--flow-side-spacing` down to children\n  * Those components, will implement their own space/padding based on `--flow-side-padding` value\n  * See RecentReadingSession.module.scss for an implementation example\n  *\n  * For now we only want this to be implemented on mobile, so we make `--flow-side-padding: 0` on tablet and above\n  **/\n  &.fullWidth {\n    padding-inline-end: 0;\n    padding-inline-start: 0;\n\n    @include breakpoints.tablet {\n      --flow-side-spacing: 0;\n    }\n  }\n}\n","@use \"src/styles/constants\";\n@use \"src/styles/breakpoints\";\n@use \"sass:map\";\n\n@mixin center-horizontally {\n  display: inline-block;\n  margin-block-start: auto;\n  margin-inline-end: auto;\n  margin-block-end: auto;\n  margin-inline-start: auto;\n}\n\n@mixin center-vertically {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n@mixin lighten-background-color {\n  background-image: linear-gradient(\n    to right,\n    var(--color-background-lighten),\n    var(--color-background-lighten)\n  );\n}\n\n// On mobile, font size 1-3 will try to preserve the line, using flex\n// font 4-5 no longer using the flex. And not preserving the line\n\n// If you're updating font size, double check on font size 3.\n// make sure it will not break the layout\n\n$line-heights-map: (\n  tajweed: (\n    tablet: (),\n  ),\n  fallback_qpc_uthmani_hafs: (\n    tablet: (\n      1: 6vh,\n      2: 6vh,\n      3: 6.1vh,\n      4: 6vh,\n      5: 5.68vh,\n      6: 8.14vh,\n      7: 10.61vh,\n      8: 13.07vh,\n      9: 15.54vh,\n      10: 18vh,\n    ),\n  ),\n  qpc_uthmani_hafs: (\n    tablet: (\n      1: 6vh,\n      2: 6vh,\n      3: 6.1vh,\n      4: 6vh,\n      5: 5.68vh,\n      6: 8.14vh,\n      7: 10.61vh,\n      8: 13.07vh,\n      9: 15.54vh,\n      10: 18vh,\n    ),\n  ),\n  text_indopak_15_lines: (\n    tablet: (\n      1: 6vh,\n      2: 6vh,\n      3: 6.1vh,\n      4: 6vh,\n      5: 5.68vh,\n      6: 8.34vh,\n      7: 11.01vh,\n      8: 13.67vh,\n      9: 16.34vh,\n      10: 19vh,\n    ),\n  ),\n  text_indopak_16_lines: (\n    tablet: (\n      1: 5.7vh,\n      2: 5.7vh,\n      3: 5.7vh,\n      4: 5.6vh,\n      5: 5.6vh,\n      6: 7.36vh,\n      7: 9.12vh,\n      8: 10.88vh,\n      9: 12.64vh,\n      10: 14.4vh,\n    ),\n  ),\n  code_v2: (\n    tablet: (\n      1: 6.1vh,\n      2: 6.1vh,\n      3: 6.1vh,\n      4: 6.1vh,\n      5: 6.1vh,\n      6: 9.28vh,\n      7: 12.46vh,\n      8: 15.64vh,\n      9: 18.82vh,\n      10: 22vh,\n    ),\n  ),\n  code_v1: (\n    tablet: (\n      1: 6.1vh,\n      2: 6vh,\n      3: 5.8vh,\n      4: 5.4vh,\n      5: 5vh,\n      6: 8vh,\n      7: 11vh,\n      8: 14vh,\n      9: 17vh,\n      10: 20vh,\n    ),\n  ),\n  translation: (\n    tablet: (\n      1: 3.2vh,\n      2: 3.5vh,\n      3: 4vh,\n      4: 4.2vh,\n      5: 4.3vh,\n    ),\n  ),\n  tafsir: (\n    tablet: (\n      1: 3.2vh,\n      2: 3.5vh,\n      3: 4vh,\n      4: 4.2vh,\n      5: 4.3vh,\n    ),\n  ),\n);\n\n// TODO: rename to $font-size-scales-map\n$scales-map: (\n  fallback_qpc_uthmani_hafs: (\n    tablet: (\n      1: 3.19vh,\n      2: 3.2vh,\n      3: 3.39vh,\n      4: 3.6vh,\n      5: 4.4vh,\n      6: 5.55vh,\n      7: 6.7vh,\n      8: 7.85vh,\n      9: 9vh,\n      10: 10.15vh,\n    ),\n    mobile: (\n      1: 4vw,\n      2: 4.5vw,\n      3: 5vw,\n      4: 8.9vw,\n      5: 11vw,\n      6: 12vw,\n      7: 13vw,\n      8: 14vw,\n      9: 15vw,\n      10: 16vw,\n    ),\n  ),\n  //TODO: rename qpc_uthmani_hafs to text_qpc_hafs\n  qpc_uthmani_hafs:\n    (\n      tablet: (\n        1: 3.2vh,\n        2: 3.5vh,\n        3: 4vh,\n        4: 4vh,\n        5: 4.4vh,\n        6: 5.56vh,\n        7: 6.72vh,\n        8: 7.88vh,\n        9: 9.04vh,\n        10: 10.27vh,\n      ),\n      mobile: (\n        1: 4vw,\n        2: 4.5vw,\n        3: 4.6vw,\n        4: 8.9vw,\n        5: 11vw,\n        6: 12vw,\n        7: 13vw,\n        8: 14vw,\n        9: 15vw,\n        10: 16vw,\n      ),\n    ),\n  text_indopak_15_lines: (\n    tablet: (\n      1: 3.2vh,\n      2: 3.5vh,\n      3: 4vh,\n      4: 4.2vh,\n      5: 4.3vh,\n      6: 5.64vh,\n      7: 6.98vh,\n      8: 8.32vh,\n      9: 9.66vh,\n      10: 11vh,\n    ),\n    mobile: (\n      1: 4.4vw,\n      2: 4.8vw,\n      3: 5.1vw,\n      4: 6vw,\n      5: 9.3vw,\n      6: 9.8vw,\n      7: 10.2vw,\n      8: 11vw,\n      9: 12vw,\n      10: 13vw,\n    ),\n  ),\n  text_indopak_16_lines: (\n    tablet: (\n      1: 3.1vh,\n      2: 3.2vh,\n      3: 3.4vh,\n      4: 3.7vh,\n      5: 3.95vh,\n      6: 5.08vh,\n      7: 6.21vh,\n      8: 7.34vh,\n      9: 8.47vh,\n      10: 9.6vh,\n    ),\n    mobile: (\n      1: 4.4vw,\n      2: 4.8vw,\n      3: 5.1vw,\n      4: 6vw,\n      5: 9.3vw,\n      6: 9.8vw,\n      7: 10.2vw,\n      8: 11vw,\n      9: 12vw,\n      10: 13vw,\n    ),\n  ),\n  code_v2: (\n    tablet: (\n      1: 2.9vh,\n      2: 3vh,\n      3: 3.2vh,\n      4: 3.5vh,\n      5: 3.7vh,\n      6: 5.16vh,\n      7: 6.62vh,\n      8: 8.08vh,\n      9: 9.54vh,\n      10: 11vh,\n    ),\n    mobile: (\n      1: 4vw,\n      2: 5vw,\n      3: 5.3vw,\n      4: 8.4vw,\n      5: 10vw,\n      6: 11vw,\n      7: 12vw,\n      8: 13vw,\n      9: 14vw,\n      10: 15vw,\n    ),\n  ),\n  code_v1: (\n    tablet: (\n      1: 3.5vh,\n      2: 3.8vh,\n      3: 4vh,\n      4: 4.3vh,\n      5: 4.5vh,\n      6: 6.14vh,\n      7: 7.77vh,\n      8: 9.42vh,\n      9: 11.05vh,\n      10: 12.7vh,\n    ),\n    mobile: (\n      1: 4vw,\n      2: 5vw,\n      3: 5.9vw,\n      4: 10vw,\n      5: 12vw,\n      6: 13vw,\n      7: 14vw,\n      8: 15vw,\n      9: 16vw,\n      10: 17vw,\n    ),\n  ),\n  translation: (\n    tablet: (\n      1: 0.85rem,\n      2: 1rem,\n      3: 1.18rem,\n      4: 1.4rem,\n      5: 2rem,\n      6: 2.3rem,\n      7: 2.7rem,\n      8: 3rem,\n      9: 3.5rem,\n      10: 4rem,\n    ),\n    mobile: (\n      1: 0.85rem,\n      2: 0.95rem,\n      3: 1.05rem,\n      4: 1.2rem,\n      5: 1.5rem,\n      6: 1.8rem,\n      7: 2.1rem,\n      8: 2.4rem,\n      9: 2.75rem,\n      10: 3rem,\n    ),\n  ),\n  tafsir: (\n    tablet: (\n      1: 0.85rem,\n      2: 1.1rem,\n      3: 1.2rem,\n      4: 1.4rem,\n      5: 2rem,\n      6: 2.3rem,\n      7: 2.7rem,\n      8: 3rem,\n      9: 3.5rem,\n      10: 4rem,\n    ),\n    mobile: (\n      1: 0.85rem,\n      2: 0.95rem,\n      3: 1.1rem,\n      4: 1.2rem,\n      5: 1.4rem,\n      6: 1.8rem,\n      7: 2.1rem,\n      8: 2.4rem,\n      9: 2.75rem,\n      10: 3rem,\n    ),\n  ),\n  tajweed: (\n    tablet: (),\n    mobile: (),\n  ),\n);\n\n$skeleton-height-map: (\n  tajweed: (\n    desktop: (\n      1: 2.52rem,\n      2: 3.47rem,\n      3: 4.08rem,\n      4: 5.03rem,\n      5: 5.15rem,\n      6: 5.65rem,\n      7: 5.8rem,\n      8: 5.9rem,\n      9: 6.05rem,\n      10: 6.15rem,\n    ),\n    mobile: (\n      1: 1.9rem,\n      2: 3.4rem,\n      3: 4.1rem,\n      4: 5.03rem,\n      5: 7.24rem,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n  ),\n  qpc_uthmani_hafs: (\n    desktop: (\n      1: 4.57vh,\n      2: 4.57vh,\n      3: 4.65vh,\n      4: 4.56vh,\n      5: 4.63vh,\n      6: 6.79vh,\n      7: 9.2vh,\n      8: 11.72vh,\n      9: 14.21vh,\n      10: 16.6vh,\n    ),\n    mobile: (\n      1: 4.55vw,\n      2: 5.5vw,\n      3: 5.5vw,\n      4: 8.9vw,\n      5: 11vw,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n  ),\n  text_indopak_15_lines: (\n    desktop: (\n      1: 4.56vh,\n      2: 4.56vh,\n      3: 4.66vh,\n      4: 4.65vh,\n      5: 4.56vh,\n      6: 6.96vh,\n      7: 9.66vh,\n      8: 12.38vh,\n      9: 15.03vh,\n      10: 17.65vh,\n    ),\n    mobile: (\n      1: 6.8vw,\n      2: 7.6vw,\n      3: 8.26vw,\n      4: 6vw,\n      5: 9.3vw,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n  ),\n  text_indopak_16_lines: (\n    desktop: (\n      1: 4.24vh,\n      2: 4.24vh,\n      3: 4.24vh,\n      4: 4.13vh,\n      5: 4.32vh,\n      6: 5.96vh,\n      7: 7.64vh,\n      8: 9.44vh,\n      9: 11.15vh,\n      10: 12.86vh,\n    ),\n    mobile: (\n      1: 6.8vw,\n      2: 7.6vw,\n      3: 8.26vw,\n      4: 6vw,\n      5: 9.3vw,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n  ),\n  code_v2: (\n    desktop: (\n      1: 4.65vh,\n      2: 4.65vh,\n      3: 4.65vh,\n      4: 4.65vh,\n      5: 4.65vh,\n      6: 7.84vh,\n      7: 11.03vh,\n      8: 14.22vh,\n      9: 17.41vh,\n      10: 20.6vh,\n    ),\n    mobile: (\n      1: 4.17vw,\n      2: 6.54vw,\n      3: 7.1vw,\n      4: 8.4vw,\n      5: 10vw,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n  ),\n  code_v1: (\n    desktop: (\n      1: 4.62vh,\n      2: 4.55vh,\n      3: 4.5vh,\n      4: 4.45vh,\n      5: 4.65vh,\n      6: 7.16vh,\n      7: 9.94vh,\n      8: 12.63vh,\n      9: 15.55vh,\n      10: 18.6vh,\n    ),\n    mobile: (\n      1: 5.08vw,\n      2: 7.05vw,\n      3: 8.78vw,\n      4: 10vw,\n      5: 12vw,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n  ),\n  default: (\n    desktop: (\n      1: 4.57vh,\n      2: 4.57vh,\n      3: 4.65vh,\n      4: 4.56vh,\n      5: 4.63vh,\n      6: 6.79vh,\n      7: 9.2vh,\n      8: 11.72vh,\n      9: 14.21vh,\n      10: 16.6vh,\n    ),\n    mobile: (\n      1: 4vw,\n      2: 5vw,\n      3: 5.4vw,\n      4: 8.9vw,\n      5: 11vw,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n  ),\n);\n\n// for now, we're only doing fixed witdth for tablet & desktop.\n// because mobile is relatively more stable compared to desktop\n// TODO: implement fixed on mobile as well\n$line-width-map: (\n  tajweed: (\n    tablet: (\n      1: calc(12.5 * var(--spacing-mega)),\n      2: calc(16.5 * var(--spacing-mega)),\n      3: calc(18.8 * var(--spacing-mega)),\n      4: calc(22.5 * var(--spacing-mega)),\n      5: calc(23.2 * var(--spacing-mega)),\n      6: calc(25.2 * var(--spacing-mega)),\n      7: calc(25.6 * var(--spacing-mega)),\n      8: calc(26.2 * var(--spacing-mega)),\n      9: calc(27 * var(--spacing-mega)),\n      10: calc(27.3 * var(--spacing-mega)),\n    ),\n  ),\n  fallback_qpc_uthmani_hafs: (\n    tablet: (\n      1: 55vh,\n      2: 59vh,\n      3: 63.8vh,\n      4: 65vh,\n      5: 66vh,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n    desktop: (\n      1: 56vh,\n      2: 56.2vh,\n      3: 60vh,\n      4: 63vh,\n      5: 81vh,\n      6: 102.6vh,\n      7: 124.3vh,\n      8: 146.2vh,\n      9: 168vh,\n      10: 190vh,\n    ),\n  ),\n  qpc_uthmani_hafs: (\n    tablet: (\n      1: 55vh,\n      2: 59vh,\n      3: 63.8vh,\n      4: 65vh,\n      5: 66vh,\n      6: 1rem,\n      7: 1rem,\n      8: 1rem,\n      9: 1rem,\n      10: 1rem,\n    ),\n    desktop: (\n      1: 60vh,\n      2: 65vh,\n      3: 73.5vh,\n      4: 74vh,\n      5: 81vh,\n      6: 102.8vh,\n      7: 124.6vh,\n      8: 146.4vh,\n      9: 168.2vh,\n      10: 190vh,\n    ),\n  ),\n  text_indopak_15_lines: (\n    tablet: (\n      1: 58vh,\n      2: 64vh,\n      3: 76vh,\n      4: 75vh,\n      5: 76vh,\n      6: 98.6vh,\n      7: 121.2vh,\n      8: 143.8vh,\n      9: 166.4vh,\n      10: 189vh,\n    ),\n  ),\n  text_indopak_16_lines: (\n    tablet: (\n      1: 55vh,\n      2: 61vh,\n      3: 63vh,\n      4: 65vh,\n      5: 69vh,\n      6: 93.2vh,\n      7: 117.4vh,\n      8: 141.6vh,\n      9: 165.8vh,\n      10: 190vh,\n    ),\n  ),\n  code_v2: (\n    tablet: (\n      1: 52vh,\n      2: 54vh,\n      3: 56vh,\n      4: 61vh,\n      5: 64.5vh,\n      6: 90.4vh,\n      7: 116.3vh,\n      8: 142.2vh,\n      9: 168.1vh,\n      10: 194vh,\n    ),\n  ),\n  code_v1: (\n    tablet: (\n      1: 54vh,\n      2: 56.5vh,\n      3: 59.5vh,\n      4: 63vh,\n      5: 67vh,\n      6: 91.6vh,\n      7: 116.2vh,\n      8: 140.8vh,\n      9: 165.4vh,\n      10: 190vh,\n    ),\n  ),\n);\n\n@function map-deep-get($map, $keys...) {\n  @each $key in $keys {\n    $map: map-get($map, $key);\n  }\n  @return $map;\n}\n\n@function get-scales($name, $device-type, $map) {\n  @return map-deep-get($map, $name, $device-type);\n}\n\n// generate line-width based on font type, font-scale, and screen width;\n@mixin generate-line-width-scales($name) {\n  $mobile-scales: get-scales($name, \"mobile\", $line-width-map);\n  $tablet-scales: get-scales($name, \"tablet\", $line-width-map);\n  $desktop-scales: get-scales($name, \"desktop\", $line-width-map);\n\n  @for $i from 1 through constants.$maximum-font-step {\n    .#{$name}-line-width-#{$i} {\n      @if $mobile-scales != null and map.has-key($tablet-scales, $i) {\n        --line-width: #{map.get($mobile-scales, $i)};\n      }\n\n      @if $tablet-scales != null and map.has-key($tablet-scales, $i) {\n        @include breakpoints.tablet {\n          --line-width: #{map.get($tablet-scales, $i)};\n        }\n      }\n\n      @if $desktop-scales != null and map.has-key($desktop-scales, $i) {\n        @include breakpoints.desktop {\n          --line-width: #{map.get($desktop-scales, $i)};\n        }\n      }\n    }\n  }\n}\n\n@mixin generate-font-scales($name) {\n  $mobile-scales: null;\n  $tablet-scales: null;\n  $tablet-line-height-scales: null;\n  $desktop-skeleton-height-scales: null;\n  $mobile-skeleton-height-scales: null;\n\n  // reading view skeletons mapping\n  @if map.has-key($skeleton-height-map, $name) {\n    $desktop-skeleton-height-scales: get-scales(\n      $name,\n      \"desktop\",\n      $skeleton-height-map\n    );\n    $mobile-skeleton-height-scales: get-scales(\n      $name,\n      \"mobile\",\n      $skeleton-height-map\n    );\n  } @else {\n    $desktop-skeleton-height-scales: get-scales(\n      \"default\",\n      \"desktop\",\n      $skeleton-height-map\n    );\n    $mobile-skeleton-height-scales: get-scales(\n      \"default\",\n      \"mobile\",\n      $skeleton-height-map\n    );\n  }\n\n  // line heights mapping\n  @if map.has-key($line-heights-map, $name) {\n    $tablet-line-height-scales: get-scales($name, \"tablet\", $line-heights-map);\n  } @else {\n    $tablet-line-height-scales: get-scales(\n      \"default\",\n      \"tablet\",\n      $line-heights-map\n    );\n  }\n\n  // font scales mapping\n  @if map.has-key($scales-map, $name) {\n    $mobile-scales: get-scales($name, \"mobile\", $scales-map);\n    $tablet-scales: get-scales($name, \"tablet\", $scales-map);\n  } @else {\n    $mobile-scales: get-scales(\"default\", \"mobile\", $scales-map);\n    $tablet-scales: get-scales(\"default\", \"tablet\", $scales-map);\n  }\n\n  @for $i from 1 through constants.$maximum-font-step {\n    .#{$name}-font-size-#{$i} {\n      --skeleton-height: #{map.get($mobile-skeleton-height-scales, $i)};\n      --font-size: #{map.get($mobile-scales, $i)};\n      --line-height: normal;\n      @include breakpoints.tablet {\n        --font-size: #{map.get($tablet-scales, $i)};\n        --line-height: #{map.get($tablet-line-height-scales, $i)};\n        --skeleton-height: #{map.get($desktop-skeleton-height-scales, $i)};\n      }\n      font-size: var(--font-size);\n    }\n  }\n}\n\n// Sets a max-width based on the device width. Inspired by the bootstrap container (https://getbootstrap.com/docs/5.0/layout/containers/).\n$large-device-width-ratio: 95%;\n$quran-max-container-width: 112rem;\n@mixin quranContainer() {\n  width: 95%;\n\n  @include breakpoints.tablet {\n    width: $large-device-width-ratio;\n    max-width: $quran-max-container-width;\n  }\n}\n\n$page-container-max-width: 80rem;\n@mixin pageContainer {\n  max-width: $page-container-max-width;\n  @include breakpoints.tablet {\n    width: 80%;\n  }\n}\n",".loadingContainer {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-block-start: var(--spacing-mega);\n  min-height: 80vh;\n}\n"],"sourceRoot":""}