/* media queries necessary for opening and closing accordion*/
@media (prefers-reduced-motion: reduce) {
  .fade {
    transition: none;
  }
}

.fade:not(.show) {
  opacity: 0;
}

.collapse:not(.show) {
  display: none;
}

.collapsing {
  height: 0;
  overflow: hidden;
  transition: height 0.35s ease;
}

@media (prefers-reduced-motion: reduce) {
  .collapsing {
    transition: none;
  }
}

.collapsing.collapse-horizontal {
  width: 0;
  height: auto;
  transition: width 0.35s ease;
}

.accordion-button {
  font-size: var(--text-size-02);
  line-height: 16px;
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  text-align: left;
  overflow-anchor: none;
  background-color: inherit;
  letter-spacing: -0.014px;
  padding: 16px 8px;
  height: 56px;
}

.accordion-button:not(.collapsed) {
  color: var(--text-primary);
  background-color: var(--state-overlays-selected);
}

.accordion-button:not(.collapsed)::after {
  background-position: left;
  transform: scaleX(1.3) rotate(180deg);
  font-weight: 600;
  font-size: 16px;
}

.accordion-button::after {
  flex-shrink: 0;
  height: 24px;
  margin-left: auto;
  content: "\2304";
  background-repeat: no-repeat;
  transition: transform 0.3s ease-in-out;
  float: left !important;
  transform: scaleX(1.3);
  font-size: 16px;
  font-weight: 600;
  transform-origin: center center;
}

.accordion-header {
  font-size: var(--text-size-02);
}

.accordion {
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

.accordion_item {
  display: flex;
  flex-direction: column;
  background-color: inherit;
  width: 100%;
  border-bottom: 1px solid var(--border-subtle-alpha-01);
}

.accordion_item:last-child {
  border-bottom: none;
}

.accordion-body {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: start;
  gap: var(--spacing-01);
}

div.page_container .accordion-item-button {
  background-color: inherit;
  width: 100%;
  display: flex;
  padding: var(--spacing-02);
  height: 40px;
  align-items: center;
  font-size: var(--text-size-02);
  line-height: var(--text-size-03);
}

/*
* Since the text inside a accordion btn is very specific
* Adding important to increase the specificity
*/
.accordion-item-button a {
  font-size: var(--text-size-02) !important;
  line-height: var(--text-size-03) !important;
  width: 100%;
  align-items: flex-start;
  display: flex;
}

div.page_container .accordion-item-button:focus {
  background-color: var(--background-selected);
  color: var(--text-primary);
}

div.page_container .accordion-item-button:hover {
  background-color: var(--state-overlays-selected-hover);
  color: var(--text-primary);
}

div.page_container .accordion-button:hover {
  color: var(--text-primary);
}
