// -----------------------------------------------------------------------------
// app basics
// -----------------------------------------------------------------------------
$class-app = '.app'
$class-app__aside = '.app__aside'
$class-app__aside--blue = '.app__aside--blue'
$class-app__aside--black = '.app__aside--black'
$class-app__aside--gray = '.app__aside--gray'
$class-app__aside--green = '.app__aside--green'
$class-app__aside--orange = '.app__aside--orange'
$class-app__aside--purple = '.app__aside--purple'
$class-app__aside--red = '.app__aside--red'
$class-app__aside--white = '.app__aside--white'
$class-app__aside--yellow = '.app__aside--yellow'
$class-app__aside--expanded = '.app__aside--expanded'
$class-app__content = '.app__content'
$class-app__content--blue = '.app__content--blue'
$class-app__content--black = '.app__content--black'
$class-app__content--gray = '.app__content--gray'
$class-app__content--green = '.app__content--green'
$class-app__content--orange = '.app__content--orange'
$class-app__content--purple = '.app__content--purple'
$class-app__content--red = '.app__content--red'
$class-app__content--white = '.app__content--white'
$class-app__content--yellow = '.app__content--yellow'
// app title
$class-app__title = '.app__title'
$class-app__title--black = '.app__title--black'
$class-app__title--blue = '.app__title--blue'
$class-app__title--gray = '.app__title--gray'
$class-app__title--green = '.app__title--green'
$class-app__title--orange = '.app__title--orange'
$class-app__title--purple = '.app__title--purple'
$class-app__title--red = '.app__title--red'
$class-app__title--yellow = '.app__title--yellow'
$class-app__title--white = '.app__title--white'
// app toolbar
$class-app__toolbar = '.app__toolbar'
$class-app__toolbar--black = '.app__toolbar--black'
$class-app__toolbar--blue = '.app__toolbar--blue'
$class-app__toolbar--gray = '.app__toolbar--gray'
$class-app__toolbar--green = '.app__toolbar--green'
$class-app__toolbar--orange = '.app__toolbar--orange'
$class-app__toolbar--purple = '.app__toolbar--purple'
$class-app__toolbar--red = '.app__toolbar--red'
$class-app__toolbar--yellow = '.app__toolbar--yellow'
$class-app__toolbar--white = '.app__toolbar--white'

// -----------------------------------------------------------------------------
// baloons
// -----------------------------------------------------------------------------
$class-baloon = '.baloon'
$class-baloon__content = '.baloon__content'
$class-baloon__header = '.baloon__header'
$class-baloon__triangle = '.baloon__triangle'
$class-baloon--bottom = '.baloon--bottom'
$class-baloon--black = '.baloon--black'
$class-baloon--gray = '.baloon--gray'
$class-baloon--green = '.baloon--green'
$class-baloon--orange = '.baloon--orange'
$class-baloon--purple = '.baloon--purple'
$class-baloon--red = '.baloon--red'
$class-baloon--yellow = '.baloon--yellow'
$class-baloon--top = '.baloon--top'
$class-baloon--visible = '.baloon--visible'
$class-baloon-wrapper = '.baloon-wrapper'
$class-baloon-wrapper--onhover = '.baloon-wrapper--on-over'

// -----------------------------------------------------------------------------
// buttons
// -----------------------------------------------------------------------------
$class-btn = '.btn'
$class-btn--left = '.btn--left'
$class-btn--right = '.btn--right'
$class-btn--icon = '.btn--icon'
// buttons icons
$class-btn__icon = '.btn__icon'
// simple modifiers
$class-btn--block = '.btn.btn--block'
$class-btn--large = '.btn.btn--large'
$class-btn--rounded = '.btn.btn--rounded'
$class-btn--small = '.btn.btn--small'
// buttons color scheme modifiers
$class-btn--black = '.btn--black'
$class-btn--blue = '.btn--blue'
$class-btn--disabled = '.btn--disabled'
$class-btn--gray = '.btn--gray'
$class-btn--green = '.btn--green'
$class-btn--orange = '.btn--orange'
$class-btn--purple = '.btn--purple'
$class-btn--red = '.btn--red'
$class-btn--yellow = '.btn--yellow'
$class-btn--white = '.btn--white'
// hollow buttons modifiers
$class-btn--hollow = '.btn--hollow'
$class-btn--hollow-black = '.btn.btn--black.btn--hollow'
$class-btn--hollow-blue = '.btn.btn--blue.btn--hollow'
$class-btn--hollow-gray = '.btn.btn--gray.btn--hollow'
$class-btn--hollow-green = '.btn.btn--green.btn--hollow'
$class-btn--hollow-orange = '.btn.btn--orange.btn--hollow'
$class-btn--hollow-purple = '.btn.btn--purple.btn--hollow'
$class-btn--hollow-red = '.btn.btn--red.btn--hollow'
$class-btn--hollow-yellow = '.btn.btn--yellow.btn--hollow'
$class-btn--hollow-white = '.btn.btn--white.btn--hollow'
$class-btn--hollow-disabled = '.btn.btn--disabled.btn--hollow'

// -----------------------------------------------------------------------------
// buttons list
// -----------------------------------------------------------------------------
$class-btn-list = '.btn-list'
$class-btn-list--vertical = '.btn-list--vertical'
$class-btn-list__btn = '.btn-list__btn'
$class-btn-list__btn--current = '.btn--current'

// -----------------------------------------------------------------------------
// cards
// -----------------------------------------------------------------------------
// cards elements
$class-card = '.card'
$class-card__b-img = '.card__b-img'
$class-card__content = '.card__content'
$class-card__content--unpadded = '.card__content--unpadded'
$class-card__footer = '.card__footer'
$class-card__footer--unpadded = '.card__footer--unpadded'
$class-card__header = '.card__header'
$class-card__header--black = '.card__header--black'
$class-card__header--blue = '.card__header--blue'
$class-card__header--gray = '.card__header--gray'
$class-card__header--green = '.card__header--green'
$class-card__header--orange = '.card__header--orange'
$class-card__header--purple = '.card__header--purple'
$class-card__header--red = '.card__header--red'
$class-card__header--yellow = '.card__header--yellow'
$class-card__header--tall = '.card__header--tall'
$class-card__header--unpadded = '.card__header--unpadded'
$class-card__header--white = '.card__header--white'

// -----------------------------------------------------------------------------
// datagrids/tables
// -----------------------------------------------------------------------------
$class-datagrid = '.datagrid'
$class-datagrid__footer = '.datagrid__footer'
$class-datagrid__header = '.datagrid__header'

// -----------------------------------------------------------------------------
// dialogs
// -----------------------------------------------------------------------------
$class-dialog = '.dialog'
$class-dialog--auto = '.dialog--auto'
$class-dialog--medium = '.dialog--medium'
$class-dialog--large = '.dialog--large'
$class-dialog--full-size = '.dialog--full-size'
$class-dialog--bottom = '.dialog--bottom'
$class-dialog--top = '.dialog--top'
$class-dialog--black = '.dialog--black'
$class-dialog--blue = '.dialog--blue'
$class-dialog--center = '.dialog--center'
$class-dialog--gray = '.dialog--gray'
$class-dialog--green = '.dialog--green'
$class-dialog--orange = '.dialog--orange'
$class-dialog--purple = '.dialog--purple'
$class-dialog--red = '.dialog--red'
$class-dialog--visible = '.dialog--visible'
$class-dialog--yellow = '.dialog--yellow'
$class-dialog__content = '.dialog__content'
$class-dialog__footer = '.dialog__footer'
$class-dialog__header = '.dialog__header'
// overlay
$class-dialog-overlay = '.dialog-overlay'
$class-dialog-overlay--visible = '.dialog-overlay--visible'

// -----------------------------------------------------------------------------
// forms
// -----------------------------------------------------------------------------
$class-form = '.form'
$class-form__block = '.form__block'
$class-form__block--inline = '.form__block.form__block--inline'
$class-form__block--list = '.form__block.form__block--list'
$class-form__element__icon = '.form__icon'
$class-form__element--icon = '.form__element.form__element--icon'
$class-form__element--invalid = '.form__element--invalid'
$class-form__element--rounded = '.form__element--rounded'
$class-form__input-check = 'input[type="checkbox"], input[type="radio"]'
$class-form__input-text = 'input'
$class-form__input-image = 'input[type="image"]'
$class-form__select = 'select'
$class-form__textarea = 'textarea'

// -----------------------------------------------------------------------------
// forms - extended
// -----------------------------------------------------------------------------
$class-input-checkbox = '.input-checkbox'
$class-input-checkbox--black = '.input-checkbox--black'
$class-input-checkbox--blue = '.input-checkbox--blue'
$class-input-checkbox--gray = '.input-checkbox--gray'
$class-input-checkbox--green = '.input-checkbox--green'
$class-input-checkbox--orange = '.input-checkbox--orange'
$class-input-checkbox--purple = '.input-checkbox--purple'
$class-input-checkbox--red = '.input-checkbox--red'
$class-input-checkbox--yellow = '.input-checkbox--yellow'

$class-input-radio = '.input-radio'
$class-input-radio--black = '.input-radio--black'
$class-input-radio--blue = '.input-radio--blue'
$class-input-radio--gray = '.input-radio--gray'
$class-input-radio--green = '.input-radio--green'
$class-input-radio--orange = '.input-radio--orange'
$class-input-radio--purple = '.input-radio--purple'
$class-input-radio--red = '.input-radio--red'
$class-input-radio--yellow = '.input-radio--yellow'

$class-input-range = '.input-range'
$class-input-range--black = '.input-range--black'
$class-input-range--blue = '.input-range--blue'
$class-input-range--gray = '.input-range--gray'
$class-input-range--green = '.input-range--green'
$class-input-range--orange = '.input-range--orange'
$class-input-range--purple = '.input-range--purple'
$class-input-range--red = '.input-range--red'
$class-input-range--yellow = '.input-range--yellow'

// -----------------------------------------------------------------------------
// forms - fancy elements
// -----------------------------------------------------------------------------
$class-input-toggle = '.input-toggle'
$class-input-toggle--black = '.input-toggle--black'
$class-input-toggle--blue = '.input-toggle--blue'
$class-input-toggle--gray = '.input-toggle--gray'
$class-input-toggle--green = '.input-toggle--green'
$class-input-toggle--orange = '.input-toggle--orange'
$class-input-toggle--purple = '.input-toggle--purple'
$class-input-toggle--red = '.input-toggle--red'
$class-input-toggle--yellow = '.input-toggle--yellow'
$class-input-toggle__input = 'input'
$class-input-toggle__text = '.input-toggle__text'
$class-input-toggle__toggle = '.input-toggle__toggle'

// -----------------------------------------------------------------------------
// list
// -----------------------------------------------------------------------------

$class-icon-list = '.icon-list'
$class-icon-list--left = '.icon-list--left'
$class-icon-list--right = '.icon-list--right'
$class-icon-list__icon = '.icon-list__icon'

// -----------------------------------------------------------------------------
// layouts
// -----------------------------------------------------------------------------
$class-layout-column = '.layout-columns'
$class-layout-column--four = '.layout-columns--four'
$class-layout-column--six = '.layout-columns--six'
$class-layout-column--three = '.layout-columns--three'
$class-layout-column--two = '.layout-columns--two'

// -----------------------------------------------------------------------------
// list
// -----------------------------------------------------------------------------
$class-list = '.list'
$class-list--indented = '.list--indented'
$class-list--unpadded = '.list--unpadded'
$class-list--vertical = '.list--vertical'
$class-list__item = '.list__item'
$class-list__item--current = '.list__item--current'
$class-list__item--unpadded = '.list__item--unpadded'

// -----------------------------------------------------------------------------
// menu
// -----------------------------------------------------------------------------
$class-menu-dropdown = '.dropdown-menu'
$class-menu__item = '.menu__item'

// -----------------------------------------------------------------------------
// navbars
// -----------------------------------------------------------------------------
$class-navbar = '.navbar'
$class-navbar--black = '.navbar--black'
$class-navbar--blue = '.navbar--blue'
$class-navbar--green = '.navbar--green'
$class-navbar--gray = '.navbar--gray'
$class-navbar--orange = '.navbar--orange'
$class-navbar--purple = '.navbar--purple'
$class-navbar--red = '.navbar--red'
$class-navbar--yellow = '.navbar--yellow'
$class-navbar--flex = '.navbar--flex'
$class-navbar__icon-hamburger = '.navbar__icon-hamburger'
$class-navbar__link = '.navbar__link'
$class-navbar__title = '.navbar__title'
$class-navbar__logo = '.navbar__logo'

// -----------------------------------------------------------------------------
// notifications
// -----------------------------------------------------------------------------
$class-notification = '.notification'
$class-notification--black = '.notification.notification--black'
$class-notification--blue = '.notification.notification--blue'
$class-notification--gray = '.notification.notification--gray'
$class-notification--green = '.notification.notification--green'
$class-notification--hidden = '.notification.notification--hidden'
$class-notification--hollow = '.notification.notification--hollow'
$class-notification--orange = '.notification.notification--orange'
$class-notification--purple = '.notification.notification--purple'
$class-notification--red = '.notification.notification--red'
$class-notification--yellow = '.notification.notification--yellow'
$class-notification--rounded = '.notification.notification--rounded'
// push notification
$class-push-notifications = '.push-notifications'
$class-push-notifications--bottom-left = '.push-notifications--bottom-left'
$class-push-notifications--bottom-right = '.push-notifications--bottom-right'
$class-push-notifications--top-left = '.push-notifications--top-left'
$class-push-notifications--top-right = '.push-notifications--top-right'

// -----------------------------------------------------------------------------
// popup
// -----------------------------------------------------------------------------
$class-popup = '.popup'
$class-popup--black = '.popup--black'
$class-popup--blue = '.popup--blue'
$class-popup--gray = '.popup--gray'
$class-popup--green = '.popup--green'
$class-popup--visible = '.popup--visible'
$class-popup--orange = '.popup--orange'
$class-popup--purple = '.popup--purple'
$class-popup--red = '.popup--red'
$class-popup--yellow = '.popup--yellow'
$class-popup--white = '.popup--white'
$class-popup--rounded = '.popup--rounded'
$class-popup__text = '.popup__text'
$class-popup-modal = '.popup-modal'
$class-popup-modal--visible = '.popup-modal--visible'

// -----------------------------------------------------------------------------
// text
// -----------------------------------------------------------------------------
// -----------------------------------------------------------------------------
// text - alignment
// -----------------------------------------------------------------------------
$class-text--center = '.text--center'
$class-text--left = '.text--left'
$class-text--right = '.text--right'

// -----------------------------------------------------------------------------
// text - casing
// -----------------------------------------------------------------------------
$class-text--capitalize = '.text--capitalize'
$class-text--italic = '.text--italic'
$class-text--lowercase = '.text--lowercase'
$class-text--uppercase = '.text--uppercase'

// -----------------------------------------------------------------------------
// text - text
// -----------------------------------------------------------------------------
$class-text-ellipsis = '.text--ellipsis'

// -----------------------------------------------------------------------------
// text - links
// -----------------------------------------------------------------------------
$class-text-link--black = '.link--black'
$class-text-link--blue = '.link--blue'
$class-text-link--gray = '.link--gray'
$class-text-link--green = '.link--green'
$class-text-link--orange = '.link--orange'
$class-text-link--purple = '.link--purple'
$class-text-link--red = '.link--red'
$class-text-link--yellow = '.link--yellow'
$class-text-link--white = '.link--white'

// -----------------------------------------------------------------------------
// text - size
// -----------------------------------------------------------------------------
$class-text-size--small = '.text-size--small'
$class-text-size--medium = '.text-size--medium'
$class-text-size--large = '.text-size--large'
$class-text-size--huge = '.text-size--green'

// -----------------------------------------------------------------------------
// toolbar
// -----------------------------------------------------------------------------
$class-toolbar = '.toolbar'
$class-toolbar__item = '.toolbar__item'

// -----------------------------------------------------------------------------
// user related stuff
// -----------------------------------------------------------------------------
$class-user = '.user'
$class-user--v-spaced = '.user--v-spaced'

// usr img
$class-user-img = '.user-img'
$class-user-img--large = '.user-img--large'
$class-user-img-wrapper = '.user-img-wrapper'
$class-user-img__edit = '.user-img__icon'


// -----------------------------------------------------------------------------
// utilities classes
// -----------------------------------------------------------------------------
$class-utility-visibility--block = '.block--'
$class-utility-visibility--hidden = '.hidden--'
$class-utility-visibility--inline-block = '.inline-block--'
$class-utility-visibility--invisible = '.invisible--'
$class-utility-visibility--table = '.table--'
$class-utility-visibility--visible = '.visible--'

// -----------------------------------------------------------------------------
// utilities classes
// -----------------------------------------------------------------------------
$class-wrapper = '.wrapper'
$class-wrapper--tight = '.wrapper--tight'
$class-wrapper--wide = '.wrapper--wide'