/******************************************************************************/
/* ______            _                   _                                    */
/* | ___ \          | |                 (_)                                   */
/* | |_/ /_   _ _ __| |_ _ __ ___  _ __  ___  __                              */
/* | ___ \ | | | '__| __| '__/ _ \| '_ \| \ \/ /                              */
/* | |_/ / |_| | |  | |_| | | (_) | | | | |>  <                               */
/* \____/ \__,_|_|   \__|_|  \___/|_| |_|_/_/\_\                              */
/*                                                                            */
/******************************************************************************/

@charset "UTF-8";


/*------- Tariff Book Headings List ------------------------------------------*/

  .view-tariff-book .views-field-tariff-hierarchy .field-content {
    /* Remove default UL styles. */
    ul {
      list-style-type: none;
      margin: 0;
    }

    .tariff-item-heading,
    .tariff-item-expandable-heading {
      display: inline-block;
      margin: 5px 0;
    }

    .tariff-item-expandable-heading {
      position: relative;
      padding-left: 22px;
    }

    .tariff-item-expandable-heading::before {
      /* Chevron, drawn as a mask rather than a background image so it takes the
         heading's own colour. It was a background-image whose SVG asked for
         fill="currentColor", which cannot work: an SVG referenced by url() is a
         separate document and never sees this element's colour, so it fell back
         to black and stayed black when the rest of the page went dark - 1.47:1
         against the dark background, against 9.29:1 in light. A mask has no
         such problem, because the colour is painted here. */
      content: '';
      display: inline-block;
      vertical-align: middle;
      width: 12px;
      height: 12px;
      margin-left: -22px;
      margin-right: 5px;
      background-color: currentColor;
      mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>') no-repeat center;
      -webkit-mask: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708"/></svg>') no-repeat center;
      cursor: pointer;
      /* Was two transition declarations, so the second silently dropped the
         first and only transform ever animated. */
      transition: background-color 0.2s, transform 0.2s;
    }

    .tariff-item-expandable-heading.expanded::before {
      transform: rotate(90deg);
    }

    /* Permalink styles */
    a.permalink {
      font-size: var(--font-size-sm);
      color: var(--secondary-color);
    }
    a.permalink:hover,
    a.permalink:focus {
      color: var(--link-color);
    }
  }


/******************************************************************************/