// The following produce a combo box widget:
// * WTextField, WEmailField or WPhoneNumberField with WSuggestions
// * WPartialDateField
// * WDateField if the browser does not support input type date
// * WDropdown Type.COMBO.
// #############################################################################

// the WSuggestions artefact can be added anywhere because our API is broken.
.wc-suggestions {
  display: none;
}

// The wrapper for all combo widgets.
[role='combobox'] {
  @include border-box;
  position: relative;
  white-space: nowrap;

  > [type='text'],
  [role='textbox'] {
    max-width: calc(100% - #{$wc-icon-size});
    width: 100%; // leave this it is important when the size attribute is set
  }

  [role='listbox'] {
    display: none;
    min-width: 100%;

    dialog & {
      min-width: 0;
    }
  }

  &[aria-expanded='true'] [role='listbox'] {
    display: block;
  }

  > button {
    @include border($width: 1px); // for consistency: see _input.scss
    @include content-box;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    max-width: #{$wc-icon-size};
    padding: $wc-input-padding 0;
    text-align: center;
    width: #{$wc-icon-size};
  }
}

[role='listbox'] {
  @include border;
  @include border-box;
  @include tight-box;
  // must be opaque
  @include wc-opaque-box;

  list-style-type: none;
  // allow for up to approx seven visible options. The factor 1.25 is a rough
  // line-height Chrome & Safari on OS - X use 1.125 whereas FF appears to use
  // 1.0625.
  max-height: (7 * 1.125 * (1 + (2 * $wc-gap-small)));
  max-width: 100%;
  overflow: auto;
  position: absolute;
  z-index: $wc-z-index-common;

  dialog & {
    position: fixed;
    z-index: $wc-z-index-common-in-dialog;
  }

  [role='option'] {
    @include border-box;
    display: block;
    margin: 0;
    min-height: 1em;
    padding: $wc-gap-small;
    width: 100%;
  }
}
