@import "src/assets/variables";

$accordion-button-color: black !default;
$accordion-icon-color: 'black' !default;
$accordion-icon-secondary-color: 'white' !default;
$accordion-secondary-background-color: 'white' !default;
$accordion-button-background-color: $secondary-background-color !default;
$accordion-button-primary-background-color: $primary-color !default;
$accordion-button-secondary-background-color: $secondary-background-color !default;
$accordion-button-tertiary-background-color: $tertiary-background-color !default;
@mixin fold-button-icon($color) {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#{$color}" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>');
}

@mixin fold-button-icon--active($color) {
  content: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#{$color}" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" ><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg>');
}

.muncher-accordion {

  .fold-content {
    max-height: 0;
    transition: max-height .3s;
    overflow: hidden;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .fold-button {
    padding: .01rem;
    cursor: pointer;
    color: $accordion-button-color;
    background: $accordion-button-background-color;
    width: 100%;
    border: none;
    outline: none;
    margin: 1px 0;

    span {
      font-style: normal;
      font-weight: 400;
      font-size: 1rem;
      text-transform: uppercase;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: left;
      margin: 0;
      padding: .6rem;
    }

    span:after {
      width: 1.5rem;
      height: 1.5rem;
      @include fold-button-icon($accordion-icon-color);
    }
  }

  .fold-button:hover, .fold-button:focus {
    opacity: .8;

    span:after {
      @include fold-button-icon--active($accordion-icon-color);
    }
  }

  .active {
    .fold-content {
      max-height: 100vh;
      overflow-y: scroll;
    }

    .fold-button {
      span:after {
        @include fold-button-icon--active($accordion-icon-color);
      }
    }
  }


  .fold-button--primary {
    color: white;
    background: $accordion-button-primary-background-color;

    span:after {
      @include fold-button-icon($accordion-icon-secondary-color);
    }
  }

  .fold-button--primary:hover, .fold-button--primary:focus, .active .fold-button--primary {
    span:after {
      @include fold-button-icon--active($accordion-icon-secondary-color);
    }
  }

  .fold-button--secondary {
    background: $accordion-button-secondary-background-color;
  }

  .fold-button--tertiary {
    background: $accordion-button-tertiary-background-color;
  }

  .fold-button--transparent {
    background: none;
  }

  .maroon {
    border-color: #6b0052;
  }

  .purple {
    border-color: #261759;
  }

  .green {
    border-color: #acd643;
  }

  .blue {
    border-color: #5fc9cb;
  }

  .orange {
    border-color: #d64025;
  }

  .fold-button--maroon {
    background-color: #990000;
  }

  .fold-button--purple {
    background-color: #6b0052;
  }

  .fold-button--green {
    background-color: #007A7C;
  }

  .fold-button--blue {
    background-color: #242866;

  }

  .fold-button--orange {
    background-color: #d64025;
  }
}