// Copyright 2017 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";

$select-padding: $pt-spacing;

.#{$ns}-multi-select {
  min-width: $pt-spacing * 37.5;
}

.#{$ns}-multi-select-popover {
  .#{$ns}-popover-content {
    // use padding on container rather than margin on input group
    // because top margin leaves some empty space with no background color.
    padding: $select-padding;
  }

  .#{$ns}-multi-select-popover-default-width {
    max-width: 350px;
  }

  // If the TagInput is being rendered inside the Popover, give it a slight margin bottom
  // so the box shadow of the input is not cut off by the Menu white background
  .#{$ns}-multi-select-popover-tag-input-margin {
    margin-bottom: 1px;
  }

  .#{$ns}-menu {
    // offset the padding added by the multiselect component so menu can remain full width with padding on either side
    // this is important so menu dividers can be full width, and so that menu items can have padding to the left and right
    // for menu items
    margin-left: -$select-padding;
    margin-right: -$select-padding;
    max-height: $select-popover-max-height;
    max-width: $select-popover-max-width;
    overflow: auto;
  }

  &.#{$ns}-popover-match-target-width {
    width: 100%;

    .#{$ns}-menu {
      max-width: none;
      min-width: 0;
    }
  }
}