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

+host-styles(mp-data-group-selector)
  display block

+prefix-classes('mp-data-group-selector-')
  .container, .container *
    box-sizing border-box

  .container
    background-color $white
    border 1px solid $grey-200
    border-radius 5px
    display flex
    padding 20px 24px

    .button-wrapper
      position relative

    .button
      align-items center
      cursor pointer
      display inline-flex

      .caret
        display inline-flex
        position relative
        top 2px

        svg-icon-style($grey-700, $mp-blue)

      &:not(.button-disabled):hover
        color $mp-blue

      &.button-disabled
        cursor default
        opacity 0.6

        .caret
          svg-icon-style($grey-700)

    .selected-option
      font-size-medium()
      font-weight $weight-medium

    .options-container
      left -3px
      position relative
      top 6px

      mp-items-menu
        width 270px