.mevea-faq-accordion {
  --color-dark-blue: #010c4c;
  --color-blue: #0094d8;
  --color-light-blue: #f5fcff;
  --color-white: #fff;
  --color-black: #000;
  --color-light-gray: #d5d8dc;

  --header-items-gap: .5rem;
  --header-padding: .7rem .5rem;
  --header-icon-size: 16px;
  --header-svg-size: 12px;

  --items-gaps: .5rem;

  --transition: .5s all;

  display: flex;
  flex-direction: column;
  gap: var(--items-gaps);
}

.mevea-faq-accordion-item-header {
  --background-color: var(--color-white);
  --border-width: 1px;
  --border-type: solid;
  --border-color: var(--color-light-gray);

  align-items: center;
  background-color: var(--background-color);
  border: var(--border-width) var(--border-type) var(--border-color);
  display: grid;
  grid-template-columns: var(--header-icon-size) 1fr;
  gap: var(--header-items-gap);
  padding: var(--header-padding);
  transition: var(--transition);
}

.mevea-faq-accordion-item:hover .mevea-faq-accordion-item-header,
.mevea-faq-accordion-item .mevea-faq-accordion-item-header:focus,
.mevea-faq-accordion-item:open .mevea-faq-accordion-item-header {
  --background-color: var(--color-dark-blue);
  --border-color: var(--color-dark-blue);
}

.mevea-faq-accordion-item-content {
  --padding: 1rem 2rem;

  background-color: var(--color-light-blue);
  padding: var(--padding);
  transition: var(--transition);
}

.mevea-faq-accordion-item-title {
  --color: var(--color-dark-blue);
  --font-size: 18px;
  --font-weight: 700;

  color: var(--color) !important;
  font-size: var(--font-size) !important;
  font-weight: var(--font-weight) !important;
  padding: 0;
  margin: 0;
  transition: var(--transition);
}

.mevea-faq-accordion-item-title-icon {
  display: flex;
  height: 100%;
  align-items: center;
}

.mevea-faq-accordion-item-title-icon > * {
  line-height: var(--header-icon-size);
  height: var(--header-icon-size);
  width: var(--header-icon-size);
  text-align: center;
}

.mevea-faq-accordion-item-title-icon svg {
  --color: var(--color-blue);

  fill: var(--color);
  height: var(--header-svg-size);
  width: var(--header-svg-size);
  transition: var(--transition);
}

.mevea-faq-accordion-item-title-icon .opened,
.mevea-faq-accordion-item:open .mevea-faq-accordion-item-title-icon .closed {
  display: none;
}

.mevea-faq-accordion-item-title-icon .closed,
.mevea-faq-accordion-item:open .mevea-faq-accordion-item-title-icon .opened {
  display: inline-block;
}

.mevea-faq-accordion-item:hover .mevea-faq-accordion-item-title,
.mevea-faq-accordion-item:hover .mevea-faq-accordion-item-title-icon svg,
.mevea-faq-accordion-item .mevea-faq-accordion-item-header:focus .mevea-faq-accordion-item-title,
.mevea-faq-accordion-item .mevea-faq-accordion-item-header:focus .mevea-faq-accordion-item-title-icon svg,
.mevea-faq-accordion-item:open .mevea-faq-accordion-item-title,
.mevea-faq-accordion-item:open .mevea-faq-accordion-item-title-icon svg {
  --color: var(--color-white);
}