/**
 * Styles for Search
 */
/**
 * _components
 *
 * All of the base styles for each page
 */
/*
 * Lib
 */
/*
 * Local
 */
/**
 * Global
 *
 * Included at all viewport sizes. This file imports all our common libraries
 * and any module and page specific styling.
 */
/*
 * Break points
 */
/**
 * _colours
 *
 * Suggest colours
 */
/*
------------------------------
    Search searched
------------------------------
*/
/* Mixin to switch font-size between breakpoints
* Following GEL typography guidelines
* http://www.bbc.co.uk/gel/guidelines/typography#type-sizes
* Use `@include typography(1.5em);`
*/
#mn {
  /* Active state */
  /* A11y - selected states */ }
  #mn .mn-searched-heading,
  #mn .mn-searched-term {
    font-size: 1.5em; }
  #mn .mn-suggest-wrapper {
    position: absolute;
    left: 0;
    width: 100%; }
  #mn .mn-suggest-wrapper.open {
    border-top: 1px solid #333; }
  #mn .mn-searched-heading {
    color: #bbbbbb;
    font-size: 1.5em;
    margin: 8px 0;
    line-height: 1.33em;
    font-weight: normal;
    border-bottom: none;
    text-transform: none; }
  #mn .mn-searched-list {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid #4a4a4a; }
    #mn .mn-searched-list:after {
      content: "";
      display: table;
      clear: both; }
  #mn .mn-searched-item {
    display: block;
    border-top: 1px solid #4a4a4a;
    line-height: 48px;
    height: 48px;
    cursor: pointer; }
    #mn .mn-searched-item:after {
      content: "";
      display: table;
      clear: both; }
  #mn .mn-searched-term {
    float: left;
    padding-left: 8px;
    color: #ffffff;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; }
  #mn .mn-searched-remove {
    float: right;
    padding-right: 8px;
    height: 48px;
    background: none;
    border: none;
    color: #9b9b9b;
    cursor: pointer;
    text-align: right;
    font-size: 1.6em; }
  #mn .mn-searched-remove .gelicon {
    font-size: 13px; }
  #mn .mn-searched-item:hover, #mn .mn-searched-item:active {
    background: #4a4a4a; }
    #mn .mn-searched-item:hover .mn-searched-term,
    #mn .mn-searched-item:hover .mn-searched-remove, #mn .mn-searched-item:active .mn-searched-term,
    #mn .mn-searched-item:active .mn-searched-remove {
      color: #a0e2f5; }
  #mn .mn-searched-term {
    display: block;
    width: 100%; }
  #mn .mn-searched-item:focus {
    background: #4a4a4a;
    color: #a0e2f5; }
  #mn .mn-searched-term:focus {
    outline: none;
    background: #4a4a4a;
    color: #a0e2f5; }
  #mn .mn-searched-remove:focus {
    background: #4a4a4a;
    color: #a0e2f5; }

/*
 * Importing CSS for breakpoints
 */
@media (min-width: 20em) {
  /**
  * _320
  *
  * Styles for screens greater than 320px wide
  */
  #mn .mn-searched-heading,
  #mn .mn-searched-term {
    font-size: 1.6em; }
  #mn .mn-searched-term {
    max-width: 250px; } }

@media (min-width: 25em) {
  /**
 * _400
 *
 * Styles for screens greater than 400px wide
 */ }

@media (min-width: 37.5em) {
  /**
 * _600
 *
 * Styles for smaller devices like tablets
 */
  #mn .mn-searched-heading,
  #mn .mn-searched-term {
    font-size: 1.6em; }
  #mn .mn-suggest-searched {
    padding-left: 148px; }
  #mn .mn-searched-term {
    max-width: 370px; } }

@media (min-width: 50em) {
  /**
 * _800
 *
 * Styles for screens greater than 800px wide
 */
  #mn .mn-searched-term {
    max-width: 525px; }
  #mn .mn-suggest-searched {
    padding-left: 148px; } }

@media (min-width: 63em) {
  /**
     * _1008
     *
     * Styles for screens greater than 1008px wide
     */
  #mn .mn-searched-heading,
  #mn .mn-searched-term {
    font-size: 1.6em; }
  #mn .mn-searched-list {
    border-bottom: none;
    margin-right: -16px; }
  #mn .mn-searched-item {
    display: block;
    float: left;
    margin-right: 16px;
    width: calc(33.33% - 16px); }
  #mn .mn-searched-item:nth-child(3) {
    margin-right: 0; }
  #mn .mn-searched-item {
    border-bottom: 1px solid #4a4a4a;
    border-top: 1px solid #4a4a4a;
    margin-top: -1px; }
  #mn .mn-searched-heading {
    margin-top: 16px; }
  #mn .mn-searched-term {
    max-width: 200px; }
  #mn .mn-searched-remove {
    padding-left: 8px; } }