@import '~mixpanel-common/stylesheets/defaults/reset.css'
@import '~mixpanel-common/stylesheets/defaults/index.css'
@import '~mixpanel-common/stylesheets/mixins/common.styl'
@import '~mixpanel-common/lib/stylesheets/components/mp-panel.styl'

body
  background-color $grey-150
  font-size-medium()

.design-system
  display flex

  .content-col
    margin-bottom 25px

section.mp-panel
  & > .mp-panel-section
    padding 30px

    &:first-child
      border-bottom none
      padding-bottom 10px

  h1
    color $grey-900
    font-size 32px

  h2
    color $grey-900
    font-size-xxl()
    margin-bottom 20px

  h3
    font-size-xl()
    margin-bottom 15px

  h4
    font-size-large()
    margin-bottom 8px

  p.desc
    font-size-large()
    line-height 26px
    margin 0
    margin-bottom 20px
    max-width 900px

    span
      &.strong
        font-weight $weight-bold

  .example
    display inline-block
    border 1px dashed $grey-200
    padding 10px
    position relative
    margin 10px
    vertical-align middle

    &.block
      display block
      margin 10px 0px

    & + p
      margin-bottom 5px

section.iconography, section.colors
  .item-palette
    display flex
    flex-flow row wrap

    .color-group:nth-child(n+2)
      margin-bottom 20px

    .list-block
      align-items center
      display flex
      margin 5px
      width 250px
      svg-icon-style($grey-700, $blue-100)

      .color
        display inline-block
        vertical-align middle
        margin-right 4px
        text-align center
        padding 0px 5px
        position relative
        width 70px
        height 20px

      .color-label
        color $grey-300
        mix-blend-mode multiply
        padding-left 5px
        position absolute

      .label
        display inline-block
        font-list-item()
        margin-left 10px
        vertical-align middle

section.styles
  .-mp-panel .example
    background-color $grey-150

    .first-panel
      padding 20px
    .mp-panel-section
      padding 20px

section.buttons
  .mp-button-bar .example
    width 250px

  .mp-toggle .example
    mp-toggle
      width 500px

      &.wide-toggle
        width 900px

    .toggle-val
      margin-left 10px

section.form-elements
  .mp-radio-button .example
    mp-radio-button
      display block
      margin-bottom 10px

  .mp-select .example
    mp-select
      display inline-block

  .mp-tag-selector .example
    mp-drop-menu
      top 40px

    .title
      padding-top 20px

      .header
        display flex
        margin-left 18px
        svg-icon-style(base-color: $green-300)

        .header-text
          color $grey-900
          display inline-block
          font-size-large()
          font-weight $weight-bold
          line-height 1.12
          margin auto 0
          padding-left 10px

      .subtext
        color $grey-500
        font-size-default()
        font-weight $weight-medium
        line-height 1.5
        margin 0 0 20px 50px

section.menus-toasts-tooltips
  .mp-toast
    .controls
      mp-button
        margin-right 16px

  .mp-drop-menu .example
    mp-button
      width 140px

    .drop-menu-container
      position relative

    .emoji
      padding 20px
      font-size 100px

  .mp-tooltip .example
    width 100px

    svg-icon
      left 40px

  .mp-upsell-popup .example
    width 320px
    height 120px

section.modals-dialogs
  .mp-modal .example
    .mp-modal-large-content
      align-items center
      display flex
      flex-direction column
      height 80vw
      max-height 80vh
      justify-content center
      width 80vw

      .emoji
        font-size 150px
        margin-bottom 50px

    .wide-modal
      width 500px

  .example mp-dialog
    left 400px
    position absolute

section.item-lists
  .mp-items-menu .example
    mp-icon-input
      box-sizing border-box
      padding 5px
      width 320px

    mp-items-menu
      height 500px
      width 320px

section.calendar-date-picker
  .mp-calendar .example
    height 250px

  .mp-date-range-picker .example
    height 370px
    width 375px

section.charts
  .mp-pie-chart .example
    height 250px
    width 250px

    .pie-segment-tooltip
      font-family $family-helvetica

      .pie-segment-tooltip-icon
        margin-right 5px

      .pie-segment-tooltip-label, .pie-segment-tooltip-value
        font-weight $weight-bold
        margin-right 5px

section.bookmarks-widget
  .example
    height 25px
    width 200px

    mp-bookmarks-widget
      background none
      height 100%
      box-shadow none

section.smart-hub
  .mp-smart-hub-data-point .example
    height 16px
    width 16px

  .mp-smart-hub-dropdown .example
    svg-icon-style($mp-blue, $blue-900)

    svg-icon
      cursor pointer

section.dashboard-selector
  .example mp-dashboard-selector
    left 0
    position absolute
    top 48px

section.custom-event-modal
  .example
    .editable-custom-event
      align-items center
      border-bottom 1px $mp-blue dotted
      display inline-flex
      font-weight $weight-medium
      line-height 20px
      padding-bottom 6px

      .custom-event-icon
        display inline-flex
        margin-right 2px
        svg-icon-style($mp-blue)

      .edit-label
        font-size-large()
        color $mp-blue

      .edit-custom-event-icon
        cursor pointer
        display inline-flex
        margin-left 1px
        svg-icon-style($grey-300, $mp-blue)

    mp-button
      display inline-block
      margin-left 15px