// -----------------------------------------------------------------------------
// app
// -----------------------------------------------------------------------------
$var-app__aside-transition = .4181s left ease-out
$var-app__title-height = 54px
$var-app__title-padding = 1.5em 2em

// -----------------------------------------------------------------------------
// baloons
// -----------------------------------------------------------------------------
$var-baloon__arrow-width = 14px
$var-baloon__content-border-width = 1px
$var-baloon-box-shadow = 0 10px 10px -5px rgba(black, .1)
$var-baloon-border-radius = 4px
$var-baloon-min-width = 380px
$var-baloon-max-width = 380px
$var-baloon-padding = 1em
$var-baloon-transition = all .21s ease-out

// -----------------------------------------------------------------------------
// breakpoints
// -----------------------------------------------------------------------------
$var-breakpoints = {
  xs: {
    name: 'xs',
    value: 0px
  },
  sm: {
    name: 'sm',
    value: 768px
  },
  md: {
    name: 'md',
    value: 1100px
  },
  lg: {
    name: 'lg',
    value: 1440px
  },
  xl: {
    name: 'xl',
    value: 1600px
  }
}

// -----------------------------------------------------------------------------
// buttons
// -----------------------------------------------------------------------------
$var-btn-border-radius = 1em\/50%
$var-btn-hollow-border-style = solid
$var-btn-hollow-border-width = 2px
$var-btn-line-height = 1
$var-btn__icon-margin-right = .5em
$var-btn__icon-min-width = 32px
$var-btn-padding = .5em 1em
$var-btn-transition = background-color .25s cubic-bezier(0.13, 0.55, 0.55, 1), color .25s cubic-bezier(0.13, 0.55, 0.55, 1)

// -----------------------------------------------------------------------------
// cards
// -----------------------------------------------------------------------------
$var-card-padding = 1em
$var-card-border-radius = 3px\/5px
$var-card-box-shadow = 0 0 3px 1px rgba(black, .08)
$var-card-box-shadow--hover = 0 0 5px 1px rgba(black, .13)
$var-card-transition = .3s box-shadow ease-out
$var-card__header--tall-border-radius = 5px
$var-card__header--tall-height = 15vw

// -----------------------------------------------------------------------------
// card list
// -----------------------------------------------------------------------------
$var-card-list__card-margin = 1em 2em

// -----------------------------------------------------------------------------
// dialog
// -----------------------------------------------------------------------------
$var-dialog__content-padding = 1em
$var-dialog__footer-padding = 1em
$var-dialog__header-padding = 1em
$var-dialog--full-size-height = 90vh
$var-dialog--full-size-width = 90vw
$var-dialog-border-radius = 8px\/3px
$var-dialog-box-shadow = 0 8px 21px -8px rgba(#000, .21), 0 0 3px 1px rgba(#000, .13)
$var-dialog-max-width = 640px
$var-dialog-min-width = 380px
$var-dialog-transition = .4s ease-in-out

// -----------------------------------------------------------------------------
// form
// -----------------------------------------------------------------------------
$var-form__element--block-border = 0 none
$var-form__element--block-margin = 0
$var-form__element--block-padding = 0
$var-form__element--block-sibling-margin = 1em 0 0
$var-form__element--inline-sibling-margin = 0
$var-form__element-border-radius = $var-btn-border-radius
$var-form__element-border-style = solid
$var-form__element-border-width = 1px
$var-form__element-focus-box-shadow = 0 0 5px 1px
$var-form__element-padding = $var-btn-padding
$var-form__element-transition = .3s box-shadow ease-out, .2s color ease-out, .33s border-color ease-out
$var-form--invalid-box-shadow = 0 0 5px 1px

// -----------------------------------------------------------------------------
// form - extended
// -----------------------------------------------------------------------------
$var-form__checkbox-border-radius = .3em
$var-form__checkbox-border-style = solid
$var-form__checkbox-border-width = 1px
$var-form__checkbox-size = 1em
$var-form__checkbox-transition = .25s border-color ease-out, .15s transform ease-out
$var-form__radio-border-radius = 50%
$var-form__radio-scale-max = .5
$var-form__radio-scale-min = 0
$var-form__radio-translate-y = -90%
$var-form__range-border-radius = 9px
$var-form__range-height = 1em
$var-form__range-cursor-border = 1px solid rgba(black, .21)
$var-form__range-cursor-border-radius = .25em
$var-form__range-cursor-box-shadow = 0 0 5px 1px rgba(black, .21)
$var-form__range-thumb-height = 1.5em
$var-form__range-track-height = .55em

// -----------------------------------------------------------------------------
// toggle checkboxes
// -----------------------------------------------------------------------------
$var-switch-checkbox-border-radius = 21px
$var-switch-checkbox__dot-box-shadow = 0 0 0 1px rgba(black, .2) inset
$var-switch-checkbox__dot-height = 19px
$var-switch-checkbox__dot-width = 19px
$var-switch-checkbox__toggle-height = 21px
$var-switch-checkbox__toggle-width = 36px
$var-switch-checkbox__toggle-transition = .3s all ease-out
$var-switch-checkbox__text-margin = .5em

// -----------------------------------------------------------------------------
// grid system
// -----------------------------------------------------------------------------
$var-grid-cols = 12
$var-grid-gutter = 0
$var-grid-padding = 1em

// -----------------------------------------------------------------------------
// icon-list
// -----------------------------------------------------------------------------
$var-icon-list__icon-padding = 0 .5em

// -----------------------------------------------------------------------------
// list
// -----------------------------------------------------------------------------
$var-list--indented-padding = 0 0 0 1em

// -----------------------------------------------------------------------------
// list--vertical
// -----------------------------------------------------------------------------
// $var-list--vertical__item-padding = 1em 1em 1em 2em;
$var-list-margin = 1em 0 0
$var-list-padding = 0
$var-list--vertical__item-padding = 1em
$var-list--vertical__item__before-transition = .34s ease-in-out
$var-list--vertical__item__before-width = .32em

// -----------------------------------------------------------------------------
// navbars
// -----------------------------------------------------------------------------
$var-navbar-padding = 0 1em
$var-navbar__link-margin = false
$var-navbar__link-padding = 1em
$var-navbar__link-transition = .2s ease-out
$var-navbar__links-padding = false
$var-navbar__logo-padding = false

// -----------------------------------------------------------------------------
// notifications
// -----------------------------------------------------------------------------
$var-notification-border-radius = 3px\/5px
$var-notification-border-style = solid
$var-notification-border-width = 2px
$var-notification-padding = $var-btn-padding
$var-notification-sibling-margin = 1em

// -----------------------------------------------------------------------------
// notifications - popup
// -----------------------------------------------------------------------------
$var-popup-border-radius = 3px\/5px
$var-popup-box-shadow = 0 10px 10px -5px rgba(black, .1), 0 0 3px 1px rgba(black, .1)
$var-popup-padding = 0
$var-popup-min-width = 380px
$var-popup-max-width = 380px
$var-popup__text-padding = 1em
$var-popup__text-sibling-padding = 0 1em 1em
$var-popup-modal-background-color = rgba(black, .21)
// -----------------------------------------------------------------------------
// notifications - push notifications
// -----------------------------------------------------------------------------
$var-push-notification-distance-x = 1em
$var-push-notification-distance-y = 1em

// -----------------------------------------------------------------------------
// typography
// -----------------------------------------------------------------------------
// $var-body-font-size = calc(((100vh / 61.8)) + 10px)
$var-body-font-size = 14px
$var-font-size = 1em
$var-line-height = 1.51
$var-headings-margin-top = 2em

// -----------------------------------------------------------------------------
// text - size
// -----------------------------------------------------------------------------
$var-text-size--small-font-size = 0.8
$var-text-size--medium-font-size = 0.9
$var-text-size--large-font-size = 1.1
$var-text-size--huge-font-size = 1.3

// -----------------------------------------------------------------------------
// user
// -----------------------------------------------------------------------------
$var-user--v-spaced-padding = 2.5em

// -----------------------------------------------------------------------------
// user img
// -----------------------------------------------------------------------------
$var-user-img-box-shadow = 0 3px 8px -3px rgba(black, .21)
$var-user-img-size = 3em
$var-user-img--large-size = 6em
$var-user-img__edit-box-shadow = 0 0 3px 1px rgba(black, .13)
$var-user-img__edit-padding = .25em
$var-user-img__edit-position = bottom 0 right 15%

// -----------------------------------------------------------------------------
// wrapper
// -----------------------------------------------------------------------------
$var-wrapper-padding = 1em
$var-wrapper-max-width = $var-breakpoints.md.value
$var-wrapper--tight-max-width = $var-breakpoints.sm.value
$var-wrapper--wide-max-width = $var-breakpoints.lg.value