@import '../../stylesheets/defaults'

+prefix-classes('mp-details-')
  .card
    background-color $white
    border-radius 7px
    border-top 10px solid var(--top-color, $mp-navy)
    box-shadow 0 3px 17px 0 rgba(0, 0, 0, 0.22)
    width 360px

    .sections
      padding 0 10px

      +slotted-styles('*')
        display block
        padding 0 10px 20px

      +slotted-styles(':not(.first)')
        border-top 1px solid $grey-150

    .actions
      align-items center
      border-top 1px solid $grey-150
      display flex
      justify-content space-between
      padding 15px 20px

+prefix-classes('mp-details-back-button-')
  .container
    align-items center
    border-bottom 1px solid $grey-150
    display flex
    padding 15px
    svg-icon-style($mp-blue)

  svg-icon
    display inline-flex

  .label
    color $grey-300
    display inline-flex
    font-family $family-helvetica
    font-size 11px
    font-weight $weight-bold
    padding-left 15px
    text-transform uppercase