<div class="container">
  <div class="grid-1">
    <button id="light">Light Theme</button>
    <button id="flamingo">Flamingo Theme</button>
    <button id="dark">Dark Blue Theme</button>
    <button id="jet-black">Jet Black</button>
  </div>
  <div class="grid-2">
    <div class="accordion">
      <div class="accordion-item">
        <div class="accordion-item__header hide-bottom-border">
          <div class="accordion-item__header-title">Lorem ipsum</div>
          <div class="accordion-item__header-state">
            <i class="fas fa-angle-down accordion-item__header-state--icon rotate-icon-home"></i>
          </div>
        </div>
        <div class="accordion-item__content">
          <div class="accordion-item__content-text">
          In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
          </div>
        </div>
      </div>

      <div class="accordion-item">
        <div class="accordion-item__header hide-bottom-border">
          <div class="accordion-item__header-title">Lorem ipsum II</div>
          <div class="accordion-item__header-state">
            <i class="fas fa-angle-down accordion-item__header-state--icon rotate-icon-home"></i>
          </div>
        </div>

        <div class="accordion-item__content">
          <div class="accordion-item__content-text">
            In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
          </div>
        </div>
      </div>
      <div class="accordion-item">
        <div class="accordion-item__header hide-bottom-border">
          <div class="accordion-item__header-title">Lorem ipsum III</div>
          <div class="accordion-item__header-state">
            <i class="fas fa-angle-down accordion-item__header-state--icon rotate-icon-home"></i>
          </div>
        </div>
   
        <div class="accordion-item__content">
          <div class="accordion-item__content-text">
          In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

@function get-setting($type, $id) {
  @return var(--#{$type}-#{$id})
}

@mixin create-theme($theme-id, $theme) {
  .#{$theme-id} {
    @each $id, $val in $theme {
      @each $inner-id, $inner-val in $val {
        --#{$id}-#{$inner-id}: #{$inner-val};
      }
    }
  }
}

$flamingo-theme: (
  body: (
    bg: lighten(#ff87ab, 10%)
  ),
  btn: (
    bg: darken(#ff87ab, 10%),
    hover: darken(#ff87ab, 5%),
    txt: #fff
  ),
  accordion: (
    font-family: 'Times, "Times New Roman", serif',
    border: 1px solid #ff87ab,
    border-radius: 5px,
    margin-bottom: 0px,
  ),
  header: (
    font-family: inherit,
    title-color: #000,
    title-font-size: 1.5rem,
    icon-color: #000,
    icon-font-size: 1.5rem,
    background: linear-gradient(#ff87ab, #fadde1),
    border-bottom: 1px solid #ff87ab,
    padding: 1rem,
  ),
  content: (
    border: none,
    background: #fff,
    text-font-family: inherit,
    text-color: #000,
    text-padding: 1rem,
    text-font-size: 1.2rem
  )
);

$dark-theme: (
  body: (
    bg: lighten(#223E4C, 10%)
  ),
  btn: (
    bg: darken(#223E4C, 10%),
    hover: darken(#223E4C, 5%),
    txt: #fff
  ),
  accordion: (
    font-family: 'Times, "Times New Roman", serif',
    border: 1px solid #223E4C,
    border-radius: 0,
    margin-bottom: 10px,
  ),
  header: (
    font-family: inherit,
    title-color: #fff,
    title-font-size: 1.5rem,
    icon-color: #fff,
    icon-font-size: 1.5rem,
    background: #223E4C,
    border-bottom: none,
    padding: 1rem,
  ),
  content: (
    border: none,
    background: #fff,
    text-font-family: inherit,
    text-color: #000,
    text-padding: 1rem,
    text-font-size: 1.2rem
  )
);

$light-theme: (
  body: (
    bg: #fff
  ),
  btn: (
    bg: #dee2e6,
    hover: darken(#dee2e6, 5%),
    txt: #000,
  ),
  accordion: (
    font-family: 'Times, "Times New Roman", serif',
    border: 1px solid #ccc,
    border-radius: 5px,
    margin-bottom: 0px,
  ),
  header: (
    font-family: inherit,
    title-color: #000,
    title-font-size: 1.5rem,
    icon-color: #000,
    icon-font-size: 1.5rem,
    background: #fff,
    border-bottom: 1px solid #ccc,
    padding: 1rem,
  ),
  content: (
    border: none,
    background: #fff,
    text-font-family: inherit,
    text-color: #000,
    text-padding: 1rem,
    text-font-size: 1.2rem
  )
);

$jet-black-theme: (
  body: (
    bg: #000
  ),
  btn: (
    bg: #fff,
    hover: darken(#fff, 10%),
    txt: #000
  ),
  accordion: (
    font-family: 'Times, "Times New Roman", serif',
    border: 1px solid #fff,
    border-radius: 5px,
    margin-bottom: 0px,
  ),
  header: (
    font-family: inherit,
    title-color: #fff,
    title-font-size: 1.5rem,
    icon-color: #fff,
    icon-font-size: 1.5rem,
    background: #000,
    border-bottom: 1px solid #fff,
    padding: 1rem,
  ),
  content: (
    border: none,
    background: #000,
    text-font-family: inherit,
    text-color: #fff,
    text-padding: 1rem,
    text-font-size: 1.2rem
  )
);


@include create-theme(dark-theme, $dark-theme);
@include create-theme(flamingo-theme, $flamingo-theme);
@include create-theme(light-theme, $light-theme);
@include create-theme(jet-black-theme, $jet-black-theme);

.accordion {
  display: flex;
  flex-direction: column;
  font-family: get-setting(accordion, font-family);
  
  &-item {
    margin-bottom: get-setting(accordion, margin-bottom);
    overflow: hidden;
    border: get-setting(accordion, border);
    

    &__header {
      display: flex;
      align-items: center;
      font-family: get-setting(header, font-family);
      padding: get-setting(header, padding);
      border-bottom: get-setting(header, border-bottom);
      background: get-setting(header, background);
      cursor: pointer;

      &-title {
        margin-right: auto;
        font-size: get-setting(header, title-font-size);
        color: get-setting(header, title-color);
      }

      &-state {
        margin-left: auto;
        font-size: get-setting(header, icon-font-size);
        transition: all 300ms linear;

        &--icon {
          color: get-setting(header, icon-color);
        }
      }
    }

    &__content {
      max-height: 0;
      border: get-setting(content, border);
      border-top: none;
      background: get-setting(content, background);
      padding: 0;
      position: relative;
      transition: max-height 500ms linear;

      &-text {
        font-family: get-setting(content, text-font-family);
        color: get-setting(content, text-color);
        padding: get-setting(content, text-padding);
        font-size: get-setting(content, text-font-size);
      }
    }
  }
}

.accordion-item:first-child {
  border-top-left-radius: get-setting(accordion, border-radius);
  border-top-right-radius: get-setting(accordion, border-radius);
}

.accordion-item:last-child {
  border-bottom-left-radius: get-setting(accordion, border-radius);
  border-bottom-right-radius: get-setting(accordion, border-radius);
}

.accordion-item:not(:first-child) {
  border-top: none;
}

.hide-bottom-border {
  transition: all 0ms linear 500ms;
  border-bottom: 0px solid transparent;
}

.show-content {
  max-height: 100vh;
  transition-delay: 100ms;
}

.rotate-icon {
  transition: transform 300ms linear;
  transform: rotate(180deg);
}

.rotate-icon-home {
  transition: transform 300ms linear 300ms;
  transform: rotate(0deg);
}

body {
  background-color: get-setting(body, bg);
}

.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.grid-1 {
  grid-column: 1;
  display: flex;
  flex-direction: column;
  justify-self: center;
  padding: 0px 10px 15px;
  
  button {
    background: get-setting(btn, bg);
    color: get-setting(btn, txt);
    padding: .75rem 1.25rem;
    margin-top: 1rem;
    border-radius: 7px;
    cursor: pointer;
    font-size: 1rem;
    border: get-setting(btn, bg);
    
    &:hover {
      background: get-setting(btn, hover);
    }
  }
}

.grid-2 {
  grid-column: 2;
}

@media (max-width: 1024px) {
  .container {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 767px) {
  .container {
    grid-template-columns: 1fr;
  }
  
  .grid-1 {
    flex: row;
    flex-flow: row wrap;
  }
  
  .grid-2 {
    grid-column: 1;
  }
}

document.documentElement.className = 'light-theme';

document.getElementById('flamingo').addEventListener('click', function(){
  document.documentElement.className = 'flamingo-theme';
}, false);

document.getElementById('dark').addEventListener('click', function(){
  document.documentElement.className = 'dark-theme';
}, false);

document.getElementById('light').addEventListener('click', function(){
  document.documentElement.className = 'light-theme';
}, false);

document.getElementById('jet-black').addEventListener('click', function(){
  document.documentElement.className = 'jet-black-theme';
}, false);


/***************/
var accordions = document.getElementsByClassName('accordion-item__header');

for(var i = 0; i < accordions.length; i++) {
  accordions[i].addEventListener('click', function(e) {
    onHeaderClick(this);
  }, false);
}

var onHeaderClick = function(_this) {
  var parent = _this.parentElement;
  _this.classList.toggle('hide-bottom-border');
  
  var icon = _this.getElementsByClassName('accordion-item__header-state--icon');
  icon[0].classList.toggle('rotate-icon');
  icon[0].classList.toggle('rotate-icon-home');
  
  var content = parent.getElementsByClassName('accordion-item__content');
  content[0].classList.toggle('show-content');
};