/** @define Accordion */

:root {

  /** Block: Accordion */

  /** Element: Item */

  /** Element: Title */

  /** Element: Title Arrow */

  /** Element: Title Link */

  /** Element: Content */

  /** Element: Body */
}

/**
 * Block: Accordion
 */

.Accordion {
  background-color: #fff;
  padding: 0;
}

/**
 * Element: Item
 */

.Accordion-item {
  list-style: none;
}

.Accordion.has-js .Accordion-item {
  border: 1px
    solid
    #bfbfbf;
  margin-top: -0.0625rem;
}

.Accordion.has-js .Accordion-item:first-child {
  border-radius: 5px 5px 0 0;
  margin-top: 0;
}

.Accordion.has-js .Accordion-item:last-child {
  border-radius: 0 0 5px 5px;
}
.Accordion.has-js .Accordion-item:only-child {
  border-radius: 5px;
}

/**
 * Element: Title
 */

.Accordion-title {
  font-size: 1rem;
  font-weight: 100;
  line-height: 1.6;
}

.Accordion.has-js .Accordion-title {
  cursor: pointer;
  margin-bottom: 0;
  margin-top: 0;
  position: relative;
}

@media (min-width: 640px) {

  .Accordion-title {
    font-size: 1.25rem;
    line-height: 1.5;
  }
}

/**
 * Element: Title Arrow
 */

.Accordion.has-js .Accordion-title::before {
  background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjQsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB3aWR0aD0iMTIuOTdweCIgaGVpZ2h0PSIyNC45N3B4IiB2aWV3Qm94PSIwIDAgMTIuOTcgMjQuOTciIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyLjk3IDI0Ljk3OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSINCgk+DQo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPg0KPCFbQ0RBVEFbDQoJLnN0MHtmaWxsOiMwMDc0QTY7fQ0KXV0+DQo8L3N0eWxlPg0KPGc+DQoJPHBhdGggY2xhc3M9InN0MCIgZD0iTTEyLjk3LDEyLjQ5YzAsMC4yNS0wLjA5LDAuNDktMC4yNywwLjY4bC0xMSwxMS41Yy0wLjM4LDAuMzktMSwwLjQxLTEuMzksMC4wM3MtMC40MS0xLTAuMDMtMS40bDEwLjM1LTEwLjgyDQoJCUwwLjI3LDEuNjdDLTAuMSwxLjI4LTAuMDksMC42NSwwLjMsMC4yN1MxLjMyLTAuMDksMS43LDAuM2wxMSwxMS41QzEyLjg4LDEyLDEyLjk3LDEyLjI0LDEyLjk3LDEyLjQ5eiIvPg0KPC9nPg0KPC9zdmc+DQo=") no-repeat center;
  background-size: contain;
  content: "";
  display: block;
  height: 14px;
  left: 20px;
  position: absolute;
  top: 15px;
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
  width: 7px;
  pointer-events: none;
}

.Accordion.has-js .Accordion-item--no-transition .Accordion-title::before {
  transition: none;
}

@media (min-width: 640px) {

  .Accordion.has-js .Accordion-title::before {
    left: 28px;
    top: 22px;
  }
}

/** UI Expanded state */

.Accordion-item.is-expanded .Accordion-title::before {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}

/** Title contains icon **/

.Accordion.has-js .Accordion-item--withIcon .Accordion-title::before {
  left: auto;
  right: 20px;
}

@media (min-width: 640px) {

  .Accordion.has-js .Accordion-item--withIcon .Accordion-title::before {
    left: auto;
    right: 28px;
  }
}

/**
 * Element: Title Link
 */

.Accordion.has-js .Accordion-titleLink {
  border: 1px solid transparent;
  display: block;
  margin: -0.0625rem;
  padding: 0.5rem 0.5rem 0.5rem 2.75rem;
}

@media (min-width: 640px) {

  .Accordion.has-js .Accordion-titleLink {
    padding: 0.75rem 0.75rem 0.75rem 3.75rem;
  }
}

.Accordion.has-js .Accordion-item:first-child .Accordion-titleLink {
  border-radius: 5px 5px 0 0;
}

.Accordion-item:last-child .Accordion-titleLink {
  border-radius: 0 0 5px 5px;
}

.Accordion-item.is-expanded:last-child .Accordion-titleLink {
  border-radius: 0;
}

/** UI States */

.Accordion-titleLink,
.Accordion-titleLink:active,
.Accordion-titleLink:focus,
.Accordion-titleLink:hover,
.Accordion-titleLink:visited {

  /* outline: 0;  Removed to ensure keyboard interation maintains outline */
  color: #0076b6;
  text-decoration: none;
}

.Accordion.has-js .Accordion-titleLink:focus {
  background-color: #f2fbfe;
  border-color: #0076b6;
  color: #70F3C0;
}

.Accordion.has-js .Accordion-titleLink:active {
  background-color: transparent;
  border-color: transparent;
}

/** With icon (padding equalised) **/

.Accordion.has-js .Accordion-item--withIcon .Accordion-titleLink {
  padding: 0.5rem;
}

@media (min-width: 640px) {

  .Accordion.has-js .Accordion-item--withIcon .Accordion-titleLink {
    padding: 0.75rem;
  }
}

/**
 * Element: Content
 */

.Accordion.has-js .Accordion-content {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in;
}

.Accordion.has-js .Accordion-content[aria-hidden="true"]:not(.is-transitioning) {
    display:none;
}

.Accordion.has-js .Accordion-item--no-transition .Accordion-content {
  transition: none;
}

.Accordion-content .Accordion-text {
  margin-bottom: 0.75rem;
  margin-top: 0.75rem;
}

.Accordion.has-js .Accordion-item.is-expanded .Accordion-content {
  height: auto;
}

/**
 * Element: Body
 */

.Accordion.has-js .Accordion-body {
  padding: 0 1rem 1rem;
  position:relative;
}

@media (min-width: 640px) {

  .Accordion.has-js .Accordion-body {
    padding: 0 1.5rem 1.5rem;
  }
}

/**
 * Element: Icon
 */

.Accordion-icon {
  vertical-align: bottom;
}

@media (min-width: 640px) {

  .Accordion-icon {
    vertical-align: text-bottom;
  }
}

/**
 * Theme definition
 *
 * This defines the theme in fundamental terms, but not how it is applied to
 * the components. That is done in a separate css file, e.g. `theme-map.css`.
 */

/**
 * Breakpoints
 */

/**
 * Colors
 */

:root {

  /* Blacks */

  /* Greys */

  /* Cyans */

  /* Digital light blues */

  /* Digital dark blues */

  /* Burgundies */

  /* Taupes */

  /* Yellows */

  /* Reds */

  /* Ambers */

  /* Greens */
}

/**
 * Fonts
 */

/**
 * Links
 */

/**
 * Selection
 */

/**
 * Spacing
 */

/**
 * Global typography
 */

:root {
  /* Small viewport sizes */

  /* Medium viewport and up sizes */
 }

/**
 * Transitions
 */

/**
 * Accordion icons layout
 * Remove if/when @bdl/components-icons is used
 */

.Accordion-icon {
  display: inline-block;
  height: 25px;
  width: 25px;
}

/**
 * Custom colleague help Status message Accordion layout
 */

@media (min-width: 768px) {
  .channel-wrapper .Accordion {
    margin-left: 8.33333%;
    margin-right: 8.33333%;
  }
}
@media (min-width: 1024px) {
  .channel-wrapper .Accordion {
    margin-left: 16.66667%;
    margin-right: 16.66667%;
  }
}
.Accordion--statusMessage .Accordion-title:before {
  background: none !important;
}
.channel-wrapper .Accordion.has-js .Accordion-item:last-child {
  border-radius: 0;
}
.channel-wrapper .Accordion.Accordion--statusMessage.has-js .Accordion-item:last-child {
  border-radius: 0 0 5px 5px;
}
.channel-wrapper .Accordion:not(.Accordion--statusMessage) {
   margin-bottom: -1px;
 }
.Accordion--statusMessage .Accordion--statusMessage-titleLink {
  padding: 0.5rem;
  border: 1px solid transparent;
  display: block;
  margin: -0.0625rem;
  color: #0076b6;
  text-decoration: none;
}
@media (min-width: 640px) {
  .Accordion--statusMessage .Accordion--statusMessage-titleLink {
    padding: 0.75rem;
  }
}

/**
 * Block: Accordion - Additional styling
 * This affects accordion componenet and Channel Wrapper Component in Colleague
 */

.Accordion-longtitle {
  display: inline-block;
}

.Accordion-shorttitle {
  display: none;
}

body.mobile .Accordion-shorttitle {
  display: inline-block;
}

body.mobile .Accordion-longtitle {
  display: none;
}