@import '../mixins/common.styl'

*
  -webkit-font-smoothing antialiased

*:focus
  outline 0

*::-ms-clear
  height 0
  width 0

body
  color $grey-700
  font-family $family-helvetica
  font-size-default()
  font-stretch normal
  font-weight $weight-regular

  &.no-scroll
    overflow hidden

a, .mp-link
  cursor pointer
  text-decoration none

  &, &:visited
    color $blue-500

  &:hover
    color $blue-300

+prefix-classes('mp-font-')
  .size-xl
    font-size-xl()

  .size-large
    font-size-large()

  .size-medium
    font-size-medium()

  .size-default
    font-size-default()

  .size-xs
    font-size-xs()

  .weight-bold
    font-weight $weight-bold

  .weight-medium
    font-weight $weight-medium

  .weight-regular
    font-weight $weight-regular

  .paragraph
    font-paragraph()

/* FORMS */
input[type=text], textarea
  border 1px solid $grey-200
  border-radius 5px
  box-sizing border-box
  color $grey-900
  display inline-block
  font-family $family-helvetica
  font-size-default()
  font-weight $weight-regular
  padding 8px
  transition border-color 150ms ease-out

  &::placeholder
    color $grey-500 !important // @stylint ignore
    font-weight weight-normal !important // @stylint ignore

  &:focus, &:active
    border-color $blue-700
    transition border-color 200ms ease-in

input[type=text]
  height 36px

mp-truncated-text
  display inline-block
  white-space nowrap
  width 100%

svg-icon-style()


/* component styles for slotted light DOM */
+prefix-classes('mp-confirm-')
  .title
    color $grey-900
    font-size-large()
    font-weight $weight-bold
    line-height 1.4
    margin-bottom 10px

  .description
    font-paragraph()

+prefix-classes('mp-confirm-delete-')
  .title
    color $grey-900
    font-size-large()
    font-weight $weight-bold
    line-height 1.4
    margin-bottom 10px

  .description
    font-paragraph()

+prefix-classes('mp-dialog-')
  .content
    padding 15px 30px

  .container
    display flex
    flex-direction column

    .body
      display flex
      flex-direction row
      min-height 92px
      padding 15px 30px 0 20px
      text-align left

    .buttons
      border-top 1px solid $grey-200
      margin-top 15px
      padding 15px 20px 15px 0
      text-align right

    mp-button
      margin-left 15px
      min-width 90px

  .title
    color $grey-900
    font-family $family-helvetica
    font-size-xl()
    font-weight $weight-bold
    line-height 1.4

  .subtitle
    font-paragraph()
    margin 12px 0

+prefix-classes('mp-modal-')
  .content
    padding 15px 30px

  .title
    color $grey-900
    font-family $family-helvetica
    font-size-xl()
    font-weight $weight-bold
    line-height 1.4

  .subtitle
    font-paragraph()
    margin 12px 0