@require "base/settings"
@require "base/fonts"
@require "base/elements"

.uie
  color var(--uie-color-main-text)
  background var(--uie-color-main-bg)

.uie-html-sketchapp-export
  padding 20px

  &__section + &__section
    margin-top var(--uie-space-xxxl)

  &__article + &__article
    margin-top var(--uie-space-xxl)

.uie-table-wrapper
  @media $mq-up_to_l
    width 100%
    margin-bottom var(--uie-space-xs)
    padding-bottom var(--uie-space-xs)
    overflow-x auto
    table
      min-width 680px
    custom-fixed-scrollbar()

.uie-tokens
  &__category + &__category
    margin-top var(--uie-space-xxxl)

  &__title
    margin-bottom var(--uie-space-m)
    font-family var(--uie-font-family-regular)
    font-size var(--uie-font-size-m)
    font-weight var(--uie-font-weight-regular)

  &__grid
    display grid
    grid-template-columns repeat(auto-fill, 120px)
    grid-gap 1rem
    padding 1rem
    border-radius var(--uie-base-border-radius)
    background-color var(--uie-color-neutral-20)

  &__container
    &--color
      display grid
      grid-template-columns repeat(auto-fill, minmax(250px, 1fr))
      grid-gap 2rem

  code
    font-size var(--uie-font-size-xs)

.uie-token
  &__color
    width 100%
    height 40px

.uie-color-token
  &__swatch
    display inline-block
    width 4.5rem
    height 4.5rem
    border-radius 50%
    border-bottom-right-radius 0 !important
    border 1px solid var(--uie-color-code-border)
    padding var(--uie-space-xxs)

    &__inner
      width 100%
      height 100%
      border-radius 50%
      border-bottom-right-radius 0 !important

  &__info
    display flex

    &--top
      align-items flex-end
      margin-bottom var(--uie-space-m)

  &__info + &__info
    margin-top var(--uie-space-xs)

  &__label,
  &__example
    flex 0 0 5.75rem
    padding-right var(--uie-space-m)
    text-align right

  &__name
    flex 1
    font-family var(--uie-font-family-regular)
    font-weight var(--uie-font-weight-regular)

  &__label
    padding-top calc(var(--uie-font-size-s) - var(--uie-font-size-xs))
    color var(--uie-color-secondary-text)
    font-family var(--uie-font-family-light)
    font-size var(--uie-font-size-xs)
    font-weight var(--uie-font-weight-light)

  &__value
    flex 1
    font-size var(--uie-font-size-s)

    &--code
      font-family var(--uie-font-family-code)

.uie-size-token
  &__size
    position relative
    bottom -.15em
    display inline-block
    background-color var(--uie-color-border-dark)

.uie-font-token
  + .uie-font-token
    margin-top var(--uie-space-xxl)

  &__info
    display flex

    &--top
      align-items flex-end
      margin-bottom var(--uie-space-m)

    &--example
      margin-bottom var(--uie-space-m)

  &__info + &__info
    margin-top var(--uie-space-xs)

  &__label
    flex 0 0 5.75rem
    text-align right
    padding-top calc(var(--uie-font-size-s) - var(--uie-font-size-xs))
    padding-right var(--uie-space-m)
    color var(--uie-color-secondary-text)
    font-family var(--uie-font-family-light)
    font-size var(--uie-font-size-xs)
    font-weight var(--uie-font-weight-light)

  &__value
    flex 1
    font-size var(--uie-font-size-s)

    &--code
      font-family var(--uie-font-family-code)

  &__example
    font-size 1rem

.uie-icon-token,
.uie-default-token
  &__value
    vertical-align middle
    &--value,
    &--variable
      font-family var(--uie-font-family-code)

.uie-icon-token
  &__icon
    display flex
    align-items center
    justify-content center
    height 80px
    margin-bottom var(--uie-space-s)
    border-radius var(--uie-base-border-radius)
    background-color var(--uie-color-neutral-0)
    box-shadow 0 2px 6px 0 rgba(0,41,77,.07)
  &__name
    font-size var(--uie-font-size-xs)
    text-align center

.uie-theme-token
  &__variablename
    display inline-block
    margin-top var(--uie-space-xs)

  &__value
    &--value
      font-family var(--uie-font-family-code)
    &--variable
      font-family var(--uie-font-family-code)
      white-space nowrap
    &--default
      text-align center

  &__swatch
    display inline-block
    width 2em
    height 2em
    margin-right var(--uie-space-xs)
    border-radius 50%
    border-bottom-right-radius 0 !important
    border 1px solid var(--uie-color-code-border)
    padding var(--uie-space-xxs)

    &__inner
      display block
      width 100%
      height 100%
      border-radius 50%
      border-bottom-right-radius 0 !important

  &__size
    position relative
    bottom -.15em
    display inline-block
    background-color var(--uie-color-bg-dark)

.uie-shadow-token
  display block
  width 12rem
  height 3rem
  margin-top var(--uie-space-m)
  margin-bottom var(--uie-space-m)
  background-color var(--uie-color-bg-dark)

.uie-border-token
  display block
  width 12rem
  height 3rem
  border-style solid // this would be overwritten by the inline style applied in case of the border style token
  border-color var(--uie-color-neutral-50)
  background-color var(--uie-color-bg-dark)

.uie-opacity-token
  display block
  position relative
  width 12rem
  height 3rem
  background-image linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%)
  background-size 20px 20px
  background-position 0 0, 0 10px, 10px -10px, -10px 0px
  &__inner
    position absolute
    top 0
    right 0
    bottom 0
    left 0
    background-color var(--uie-color-accent-ultradark)
