/*
Accordion menu

Accordion menu styles from trimble css

Markup:
<ul class="accordion">
  <li class="accordion-menu">
    <a href="#">Item 1</a>
    <ul class="accordion-menu-container">
      <li class="accordion-menu">
        <a href="#">Item 11</a>
        <ul class="accordion-menu-container">
          <li><a href="#">Item 111</a></li>
          <li><a href="#">Item 112</a></li>
        </ul>
      </li>
      <li><a href="#">Item 12</a></li>
      <li><a href="#">Item 13</a></li>
    </ul>
  </li>
  <li class="accordion-menu">
    <a href="#">Item 2</a>
    <ul class="accordion-menu-container">
      <li><a href="#">Item 21</a></li>
    </ul>
  </li>
  <li class="accordion-menu">
    <a href="#">Item 3</a>
  </li>
</ul>

Styleguide UI Elements.accordionmenu
*/

/*
Accordion panel

Accordion panel styles from trimble css

Markup:
<div class="info-panel">
<section>
		<div class="section-title accordion accordion-panel">
			<label>Details</label>
		</div>
		<div class="accordion-content" style="max-height: 75px;">
			<ul>
				<li class="list-item">
					<label class="field">Email:</label>
					<span class="value">keysersoze@yahoo.com</span>
				</li>
				<li class="list-item">
					<label class="field">Phone:</label>
				<span class="value">001-303-709-9207</span>
				</li>
				<li class="list-item">
					<label class="field">Time Zone:</label>
				<span class="value">MST</span>
				</li>
			</ul>
		</div>
	</section>
	<section>
		<div class="section-title accordion accordion-panel">
			<label>Projects</label>
		</div>
		<div class="accordion-content">
			<ul>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/building.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Trimble Building</span>
						<span>Owner</span>
					</div>
				</li>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/river.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Riverfront Overpass</span>
						<span>Contributor</span>
					</div>
				</li>
				<li class="list-item-image">
					<div class="app-icon">
						<img src="../src/images/shopping.jpg" alt="">
					</div>
					<div class="app-details">
						<span class="name">Downtown Shopping Mall</span>
						<span>Contributor</span>
					</div>
				</li>
			</ul>
		</div>
	</section>
</div>

Styleguide UI Elements.accordionpanel
*/

.accordion {
  .accordion-menu{
    padding: 0;
    margin: 0;
    a {
      text-decoration: none;
      cursor: pointer;
    }
    li {
      margin: 0.625rem 0;
    }
    .accordion-menu-container {
      padding-left: 1.25rem;
      margin: 0.625rem 0;
      display: none;
      &.is-visible {
        display: block;
        height: auto;
      }
    }
  }
  &.accordion-panel{
    cursor: pointer;
    background:url('../images/Icons/add_default.svg') no-repeat right;
    &.active {
        background:url('../images/Icons/remove_default.svg') no-repeat right;
    }
  }
}
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
  display: none;
}