@use "../utils" as *;

/*----------------------------------------*/
/*  2.12 Accordion
/*----------------------------------------*/
.mt-accordion {
  &-header {
    margin: 0;
  }

  &-item {
    border-bottom: 1px solid var(--mt-border-1);
    padding-bottom: 12px;
  }

  &-button {
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
    width: 100%;
    text-align: left;
    @include flexbox();
    justify-content: space-between;

    &::after {
      content: "\f00d";
      font-family: var(--mt-ff-fontawesome);
      font-size: 12px;
      color: var(--mt-text-p);
      border: 1px solid var(--mt-border-1);
      border-radius: 100%;
      width: 32px;
      height: 32px;
      line-height: 32px;
      text-align: center;
    }

    &.collapsed {
      &::after {
        content: "+";
      }
    }
  }
}

.mtfaq {
  &__area {
    & .mt-section-content {
      @media #{$md,$xs} {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }

  &__2 {
    & .mt-accordion-item {
      border-bottom: 1px solid var(--mt-border-3);
    }

    & .mt-accordion-button {
      color: var(--mt-common-white);

      &::after {
        color: var(--mt-common-white);
        border: 1px solid var(--mt-border-3);
      }
    }

    & .mt-accordion-body {
      & p {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }

  &__whtite {
    & .mtfaq {
      & .mt-accordion-item {
        border-bottom: 1px solid var(--mt-border-1);
      }

      & .mt-accordion-button {
        color: #000;

        &::after {
          color: #000;
          border: 1px solid var(--mt-border-1);
        }
      }

      & .mt-accordion-body {
        & p {
          color: rgba(0, 0, 0, 0.8);
        }
      }
    }
  }
}

.mt-faq {
  &-button {
    text-align: left;
    font-size: 24px;
    border-bottom: 1px solid transparent;
    margin-bottom: 0px;
    padding-top: 0px;
    display: block;
    width: 100%;

    & span {
      font-size: 20px;
      margin-right: 5px;
    }

    // &.collapsed {
    //     border-bottom: 1px solid #D9D9D9;
    //     margin-bottom: 20px;
    // }
  }
}

.mt-fact-wrap {
  & p {
    & br {
      @media #{$md,$xs} {
        display: none;
      }
    }
  }
}