// Imports
@import './_variables.scss'
@import '../VAvatar/_variables.scss'

// Theme
+theme(v-skeleton-loader) using ($material)
  .v-skeleton-loader__bone::after
    background: map-get($material, 'skeleton')

  .v-skeleton-loader__avatar,
  .v-skeleton-loader__button,
  .v-skeleton-loader__chip,
  .v-skeleton-loader__divider,
  .v-skeleton-loader__heading,
  .v-skeleton-loader__image,
  .v-skeleton-loader__text
    background: map-get($material, 'dividers')

  .v-skeleton-loader__actions,
  .v-skeleton-loader__article,
  .v-skeleton-loader__card-heading,
  .v-skeleton-loader__card-text,
  .v-skeleton-loader__date-picker,
  .v-skeleton-loader__list-item,
  .v-skeleton-loader__list-item-avatar,
  .v-skeleton-loader__list-item-text,
  .v-skeleton-loader__list-item-two-line,
  .v-skeleton-loader__list-item-avatar-two-line,
  .v-skeleton-loader__list-item-three-line,
  .v-skeleton-loader__list-item-avatar-three-line,
  .v-skeleton-loader__table-heading,
  .v-skeleton-loader__table-thead,
  .v-skeleton-loader__table-tbody,
  .v-skeleton-loader__table-tfoot
    background: map-get($material, 'cards')

.v-skeleton-loader
  border-radius: $skeleton-loader-border-radius
  position: relative
  vertical-align: top

  &__actions
    padding: $skeleton-loader-actions-padding
    text-align: right

    .v-skeleton-loader__button
      display: inline-block

      &:first-child
        +ltr()
          margin-right: $skeleton-loader-actions-button-margin

        +rtl()
          margin-left: $skeleton-loader-actions-button-margin


  .v-skeleton-loader__list-item,
  .v-skeleton-loader__list-item-avatar,
  .v-skeleton-loader__list-item-text,
  .v-skeleton-loader__list-item-two-line,
  .v-skeleton-loader__list-item-avatar-two-line,
  .v-skeleton-loader__list-item-three-line,
  .v-skeleton-loader__list-item-avatar-three-line
    border-radius: $skeleton-loader-border-radius

  .v-skeleton-loader__actions,
  .v-skeleton-loader__article,
  .v-skeleton-loader__card,
  .v-skeleton-loader__card-avatar,
  .v-skeleton-loader__card-heading,
  .v-skeleton-loader__card-text,
  .v-skeleton-loader__date-picker,
  .v-skeleton-loader__date-picker-options,
  .v-skeleton-loader__date-picker-days,
  .v-skeleton-loader__list-item,
  .v-skeleton-loader__list-item-avatar,
  .v-skeleton-loader__list-item-text,
  .v-skeleton-loader__list-item-two-line,
  .v-skeleton-loader__list-item-avatar-two-line,
  .v-skeleton-loader__list-item-three-line,
  .v-skeleton-loader__list-item-avatar-three-line,
  .v-skeleton-loader__paragraph,
  .v-skeleton-loader__sentences,
  .v-skeleton-loader__table,
  .v-skeleton-loader__table-cell,
  .v-skeleton-loader__table-heading,
  .v-skeleton-loader__table-thead,
  .v-skeleton-loader__table-tbody,
  .v-skeleton-loader__table-tfoot,
  .v-skeleton-loader__table-row,
  .v-skeleton-loader__table-row-divider
    &::after
      display: none

  &__article
    .v-skeleton-loader__heading
      +ltr()
        margin: $skeleton-loader-article-heading-margin-top-left 0 $skeleton-loader-article-heading-margin-x $skeleton-loader-article-heading-margin-top-left

      +rtl()
        margin: $skeleton-loader-article-heading-margin-top-left $skeleton-loader-article-heading-margin-x 0 $skeleton-loader-article-heading-margin-top-left

    .v-skeleton-loader__paragraph
      padding: $skeleton-loader-article-paragraph-padding

  &__bone
    border-radius: inherit
    overflow: hidden
    position: relative

    &::after
      animation: $skeleton-loader-loading-animation
      content: ''
      height: 100%
      left: 0
      position: absolute
      right: 0
      top: 0
      transform: $skeleton-loader-loading-transform
      z-index: 1

  &__avatar
    border-radius: $avatar-border-radius
    height: $skeleton-loader-avatar-height
    width: $skeleton-loader-avatar-width

  &__button
    border-radius: $skeleton-loader-button-border-radius
    height: $skeleton-loader-button-height
    width: $skeleton-loader-button-width

  &__card
    .v-skeleton-loader__image
      border-radius: 0

  &__card-heading
    .v-skeleton-loader__heading
      margin: $skeleton-loader-card-heading-loader-heading-margin

  &__card-text
    padding: $skeleton-loader-card-text-padding

  &__chip
    border-radius: $skeleton-loader-chip-border-radius
    height: $skeleton-loader-chip-height
    width: $skeleton-loader-chip-width

  &__date-picker
    border-radius: $skeleton-loader-date-picker-border-radius

    .v-skeleton-loader__list-item:first-child
      .v-skeleton-loader__text
        max-width: 88px
        width: 20%

    .v-skeleton-loader__heading
      max-width: 256px
      width: 40%

  &__date-picker-days
    display: flex
    flex-wrap: wrap
    padding: $skeleton-loader-date-picker-days-padding
    margin: 0 auto

    .v-skeleton-loader__avatar
      border-radius: $skeleton-loader-border-radius
      flex: 1 1 auto
      margin: $skeleton-loader-date-picker-days-margin
      height: $skeleton-loader-date-picker-days-height
      width: $skeleton-loader-date-picker-days-width

  &__date-picker-options
    align-items: center
    display: flex
    padding: $skeleton-loader-date-picker-options-padding

    .v-skeleton-loader__avatar
      height: $skeleton-loader-date-picker-options-avatar-height
      width: $skeleton-loader-date-picker-options-avatar-width

      &:nth-child(2)
        margin-left: auto

        +ltr()
          margin-right: $skeleton-loader-date-picker-options-avatar-child-margin

        +rtl()
          margin-left: $skeleton-loader-date-picker-options-avatar-child-margin

    .v-skeleton-loader__text.v-skeleton-loader__bone:first-child
      margin-bottom: 0px
      max-width: 50%
      width: 456px

  &__divider
    border-radius: $skeleton-loader-divider-border-radius
    height: $skeleton-loader-divider-height

  &__heading
    border-radius: $skeleton-loader-heading-border-radius
    height: $skeleton-loader-heading-height
    width: 45%

  &__image
    height: $skeleton-loader-image-height
    border-radius: 0

    ~ .v-skeleton-loader__card-heading
      border-radius: 0

    &::first-child, &::last-child
      border-radius: inherit

  &__list-item
    height: $skeleton-loader-list-item-height

  &__list-item-three-line
    flex-wrap: wrap

    > *
      flex: 1 0 100%
      width: 100%

  &__list-item-avatar,
  &__list-item-avatar-two-line,
  &__list-item-avatar-three-line
    .v-skeleton-loader__avatar
      height: $skeleton-loader-item-avatar-height
      width: $skeleton-loader-item-avatar-width

  &__list-item-avatar
    height: $skeleton-loader-avatar-height

  &__list-item-two-line,
  &__list-item-avatar-two-line
    height: $skeleton-loader-item-two-line-height

  &__list-item-three-line,
  &__list-item-avatar-three-line
    height: $skeleton-loader-item-three-line-height

  &__list-item-avatar-three-line
    .v-skeleton-loader__avatar
      align-self: flex-start

  &__list-item,
  &__list-item-avatar,
  &__list-item-two-line,
  &__list-item-three-line,
  &__list-item-avatar-two-line,
  &__list-item-avatar-three-line
    align-content: center
    align-items: center
    display: flex
    flex-wrap: wrap
    padding: $skeleton-loader-item-padding

    .v-skeleton-loader__avatar
      +ltr()
        margin-right: $skeleton-loader-item-avatar-margin

      +rtl()
        margin-left: $skeleton-loader-item-avatar-margin

    .v-skeleton-loader__text:last-child,
    .v-skeleton-loader__text:only-child
      margin-bottom: 0

  &__paragraph,
  &__sentences
    flex: 1 0 auto

  &__paragraph
    &:not(:last-child)
      margin-bottom: 6px

    .v-skeleton-loader__text:nth-child(1)
      max-width: 100%

    .v-skeleton-loader__text:nth-child(2)
      max-width: 50%

    .v-skeleton-loader__text:nth-child(3)
      max-width: 70%

  &__sentences
    .v-skeleton-loader__text:nth-child(2)
      max-width: 70%

    &:not(:last-child)
      margin-bottom: 6px

  &__table-heading
    align-items: center
    display: flex
    justify-content: space-between
    padding: $skeleton-loader-table-heading-padding

    .v-skeleton-loader__heading
      max-width: 15%

    .v-skeleton-loader__text
      max-width: 40%

  &__table-thead
    display: flex
    justify-content: space-between
    padding: $skeleton-loader-table-thead-padding

    .v-skeleton-loader__heading
      max-width: 5%

  &__table-tbody
    padding: $skeleton-loader-table-tbody-padding

  &__table-tfoot
    align-items: center
    display: flex
    justify-content: flex-end
    padding: $skeleton-loader-table-tfoot-padding

    > *
      +ltr()
        margin-left: $skeleton-loader-table-tfoot-children-margin

      +rtl()
        margin-right: $skeleton-loader-table-tfoot-children-margin

    .v-skeleton-loader__avatar
      height: $skeleton-loader-table-tfoot-avatar-height
      width: $skeleton-loader-table-tfoot-avatar-width

    .v-skeleton-loader__text
      margin-bottom: 0

      &:nth-child(1)
        max-width: 128px

      &:nth-child(2)
        max-width: 64px

  &__table-row
    display: flex
    justify-content: space-between

  &__table-cell
    align-items: center
    display: flex
    height: $skeleton-loader-table-cell-height
    width: $skeleton-loader-table-cell-width

    .v-skeleton-loader__text
      margin-bottom: 0

  &__text
    border-radius: $skeleton-loader-text-border-radius
    flex: 1 0 auto
    height: $skeleton-loader-text-height
    margin-bottom: 6px

  &--boilerplate
    .v-skeleton-loader__bone:after
      display: none

  &--is-loading
    overflow: hidden

  &--tile
    border-radius: 0

    .v-skeleton-loader__bone
      border-radius: 0

@keyframes loading
  100%
    transform: translateX(100%)