:root {
  --accordion--bg-color: transparent;
  --accordion--text-color: #211d1c;
  --accordion--border_colour: #D9D8D6;
  --accordion--arrow-colour: #1d42a6;
  --accordion--font_family: 'Roboto';
  --accordion--font_size: 1.25rem;
  --accordion--font_weight: 500;
  --accordion--font_style: normal;
  --accordion--line_height: 120%;
  --accordion--padding: var(--space-sm) 0;
  --accordion--active--bg-color: transparent;
  --accordion--active--text-color: #1d42a6;
  --accordion--active--border_colour: #D9D8D6;
  --accordion--active--arrow-colour: #1d42a6;
  /* --accordion--hover--text_colour: #211d1c;
  --accordion--hover--background_colour: #f2f0f0;
  --accordion--hover--border_colour: #D9D8D6;
  --accordion--hover--arrow-colour: #1d42a6; */
  --accordion--content--background-colour: transparent;
  --accordion--content--border_colour: #ffffff;
  --accordion--content--padding: 0;
}
/* Restrict Accordion width to Narrow in 1 column sections */
.l--layout-onecolumn {
  .l__main {
    .l__primary {
      & > .paragraph--type--oxfcms-accordion {
        width: var(--oxfcms-component--small-width);
        margin: auto;
      }
    }
  }
}

.me-accordion {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--accordion--border_colour);
  /* &:hover {
    border-color: var(--accordion--hover--border_colour);
  } */
  &:first-of-type {
    border-top-width: 1px;
    border-top-style: solid;
    border-top-color: var(--accordion--border_colour);
  }
  .me-accordion__heading {
    margin: 0;
  }
  .me-accordion__trigger {
    background-color: var(--accordion--bg-color);
    color: var(---accordion--text-color);
    padding: var(--accordion--padding);
    font-family: var(--accordion--font_family);
    font-size: var(--accordion--font_size);
    font-weight: var(--accordion--font_weight);
    font-style: var(--accordion--font_style);
    line-height: var(--accordion--line_height);
    text-align: left;

    &::after{
      content: "";
      mask-image: url("data:image/svg+xml,%3Csvg width='30' height='30' viewBox='0 0 30 30' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M15 15.8437L11.1562 12L9.375 13.75L15 19.375L20.625 13.75L18.8437 12L15 15.8437ZM2.5 15C2.5 13.2708 2.82812 11.6458 3.48437 10.125C4.14062 8.60417 5.03125 7.28125 6.15625 6.15625C7.28125 5.03125 8.60417 4.14062 10.125 3.48437C11.6458 2.82812 13.2708 2.5 15 2.5C16.7292 2.5 18.3542 2.82812 19.875 3.48437C21.3958 4.14062 22.7187 5.03125 23.8437 6.15625C24.9687 7.28125 25.8594 8.60417 26.5156 10.125C27.1719 11.6458 27.5 13.2708 27.5 15C27.5 16.7292 27.1719 18.3542 26.5156 19.875C25.8594 21.3958 24.9687 22.7187 23.8437 23.8437C22.7187 24.9687 21.3958 25.8594 19.875 26.5156C18.3542 27.1719 16.7292 27.5 15 27.5C13.2708 27.5 11.6458 27.1719 10.125 26.5156C8.60417 25.8594 7.28125 24.9687 6.15625 23.8437C5.03125 22.7187 4.14062 21.3958 3.48437 19.875C2.82812 18.3542 2.5 16.7292 2.5 15ZM5 15C5 17.7917 5.96875 20.1562 7.90625 22.0937C9.84375 24.0312 12.2083 25 15 25C17.7917 25 20.1562 24.0312 22.0937 22.0937C24.0312 20.1562 25 17.7917 25 15C25 12.2083 24.0312 9.84375 22.0937 7.90625C20.1562 5.96875 17.7917 5 15 5C12.2083 5 9.84375 5.96875 7.90625 7.90625C5.96875 9.84375 5 12.2083 5 15Z' fill='%231D42A6'/%3E%3C/svg%3E");
      mask-position: center;
      mask-repeat: no-repeat;
      height: 1em;
      width: 1em;
      display: block;
      background-color: var(--accordion--arrow-colour);
      padding: 5px;
      transition: transform .35s ease-in-out;
      transform: rotate(0deg);
      transform-origin: center;

      @media (prefers-reduced-motion) {
        transition-duration: 0ms;
      }

    }

    &[aria-expanded="true"] {
      background-color: var(--accordion--active--bg-color);
      color: var(--accordion--active--text-color);
      text-decoration: underline;
      /* &:hover {
        text-decoration: none;
        background-color: var(--accordion--hover--background_colour);
        color: var(--accordion--hover--text_colour);
        &:after {
          background-color: var(--accordion--hover--arrow-colour);
        }
      } */
    }
  }

  &.is-open {
    .me-accordion__heading {
      .me-accordion__trigger {
        &::after {
          transform: rotate(180deg);
        }
      }
    }
  }
  .me-accordion__content {
    background-color: var(--accordion--content--background-colour);
    border-color: var(--accordion--content--text_colour);
    display: block;
    padding: var(--accordion--content--padding);
    visibility: hidden;
    overflow: hidden;
    max-height: 0;
    transition: all .6s ease;

    @media (prefers-reduced-motion) {
      transition-duration: 0ms;
    }
    &.is-open {
      max-height: unset;
      visibility: visible;
    }
  }
}

.is-mercury-edit-mode .me-accordion .me-accordion__content {
  overflow: visible;
}
/* Font sizing, media query variable changes. */
/* Desktop and Large Desktop */

@media all and (width >= 1280px) {
  :root {
    --accordion--font_size: 1.375rem;
  }
}