<div class="o-grid p-layout">
  <div class="o-grid__item o-grid__header">
    <form>
      <label for="search">
        <input type="search" name="search" id="search" />
        <button class="c-btn c-btn--yellow">Search</button>
      </label>
    </form>
  </div>
  <div class="o-grid__item o-grid__main">
    <button class="c-btn c-btn--yellow c-btn--3d">3D button</button>
    
    <br><br>
    
    <dl id="accordion-group-main-light"
      role="presentation"
      class="c-accordion c-accordion--light">
      <dt role="heading" aria-level="3">
        <button aria-expanded="true"
          class="c-accordion__trigger"
          aria-controls="sect-main-light-1"
          id="accordion-main-light-1"
          type="button">
          <span class="c-accordion__heading">
            Accordion heading 1
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-main-light-1"
        role="region"
        aria-labelledby="accordion-main-light-1"
        class="c-accordion__panel">
        <div>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
        </div>
      </dd>
      
      <dt role="heading" aria-level="3">
        <button aria-expanded="false"
          class="c-accordion__trigger"
          aria-controls="sect-main-light-2"
          id="accordion-main-light-2"
          type="button">
          <span class="c-accordion__heading">
            Accordion heading 2
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-main-light-2"
        role="region"
        aria-labelledby="accordion-main-light-2"
        class="c-accordion__panel">
        <div>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
        </div>
      </dd>
      
      <dt role="heading" aria-level="3">
        <button aria-expanded="false"
          class="c-accordion__trigger"
          aria-controls="sect-main-light-3"
          id="accordion-main-light-3"
          type="button">
          <span class="c-accordion__heading">
            Accordion heading 3
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-main-light-3"
        role="region"
        aria-labelledby="accordion-main-light-3"
        class="c-accordion__panel">
        <div>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
        </div>
      </dd>
    </dl>
    
    <br><br>
    
    <dl id="accordion-group-main-dark"
      role="presentation"
      class="c-accordion c-accordion--dark c-accordion--single">
      <dt role="heading" aria-level="3">
        <button aria-expanded="false"
          class="c-accordion__trigger"
          aria-controls="sect-main-dark-1"
          id="accordion-main-dark-1"
          type="button">
          <span class="c-accordion__heading">
            Accordion heading 1
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-main-dark-1"
        role="region"
        aria-labelledby="accordion-main-dark-1"
        class="c-accordion__panel">
        <div>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
        </div>
      </dd>
      
      <dt role="heading" aria-level="3">
        <button aria-expanded="true"
          class="c-accordion__trigger"
          aria-controls="sect-main-dark-2"
          id="accordion-main-dark-2"
          type="button">
          <span class="c-accordion__heading">
            Accordion heading 2
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-main-dark-2"
        role="region"
        aria-labelledby="accordion-main-dark-2"
        class="c-accordion__panel">
        <div>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
        </div>
      </dd>
      
      <dt role="heading" aria-level="3">
        <button aria-expanded="false"
          class="c-accordion__trigger"
          aria-controls="sect-main-dark-3"
          id="accordion-main-dark-3"
          type="button">
          <span class="c-accordion__heading">
            Accordion heading 3
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-main-dark-3"
        role="region"
        aria-labelledby="accordion-main-dark-3"
        class="c-accordion__panel">
        <div>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
          <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Optio unde amet quasi quam ad nam ipsum, consectetur expedita, fugit assumenda sapiente eum, ut debitis cumque aut voluptatem officiis neque minima.</p>
        </div>
      </dd>
    </dl>
  </div>

  <div class="o-grid__item o-grid__sidebar">
    <a href="#" role="button" class="c-btn c-btn--yellow">Link button</a>
    
    <br><br>
    
    <dl id="accordion-group-sidebar"
      role="presentation"
      class="c-accordion p-sidebar-menu">
      <dt role="heading" aria-level="3">
        <button aria-expanded="false"
          class="c-accordion__trigger p-sidebar-menu__button"
          aria-controls="sect-sidebar-1"
          id="accordion-sidebar-1"
          type="button">
          <span class="c-accordion__heading">
            Menu 1
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-sidebar-1"
        role="region"
        aria-labelledby="accordion-sidebar-1"
        class="c-accordion__panel p-sidebar-menu__panel">
        <div>
          <ul class="p-sidebar-menu__list">
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 1</a>
            </li>
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 1</a>
            </li>
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 1</a>
            </li>
          </ul>
        </div>
      </dd>
      
      <dt role="heading" aria-level="3">
        <button aria-expanded="false"
          class="c-accordion__trigger p-sidebar-menu__button"
          aria-controls="sect-sidebar-2"
          id="accordion-sidebar-2"
          type="button">
          <span class="c-accordion__heading">
            Menu 2
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-sidebar-2"
        role="region"
        aria-labelledby="accordion-sidebar-2"
        class="c-accordion__panel p-sidebar-menu__panel">
        <div>
          <ul class="p-sidebar-menu__list">
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 2</a>
            </li>
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 2</a>
            </li>
          </ul>
        </div>
      </dd>
      
      <dt role="heading" aria-level="3">
        <button aria-expanded="true"
          class="c-accordion__trigger p-sidebar-menu__button"
          aria-controls="sect-sidebar-3"
          id="accordion-sidebar-3"
          type="button">
          <span class="c-accordion__heading">
            Menu 3
          </span>
          <span class="c-arrow">
            <i class="c-arrow__left"></i>
            <i class="c-arrow__right"></i>
          </span>
        </button>
      </dt>
      <dd id="sect-sidebar-3"
        role="region"
        aria-labelledby="accordion-sidebar-3"
        class="c-accordion__panel p-sidebar-menu__panel">
        <div>
          <ul class="p-sidebar-menu__list">
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 3</a>
            </li>
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 3</a>
            </li>
            <li class="p-sidebar-menu__item">
              <span class="c-arrow">
                <i class="c-arrow__left"></i>
                <i class="c-arrow__right"></i>
              </span>
              <a class="p-sidebar-menu__link" href="#">Submenu 3</a>
            </li>
          </ul>
        </div>
      </dd>
    </dl>
  </div>
  <div class="o-grid__item o-grid__footer">
    <a href="#" role="button" class="c-btn c-btn--large c-btn--blue">Contact</a>
    <dl id="accordion-group-footer"
      role="presentation"
      class="c-accordion c-accordion--disable">
      <dt role="heading" aria-level="3">
        <button aria-expanded="true"
          class="c-accordion__trigger"
          aria-controls="sect-footer-1"
          id="accordion-footer-1"
          type="button">
          <span class="c-accordion__heading">
            Connect with me
          </span>
        </button>
      </dt>
      <dd id="sect-footer-1"
        role="region"
        aria-labelledby="accordion-footer-1"
        class="c-accordion__panel">
        <div>
          <ul class="c-social-media__list">
            <li class="c-social-media__item">
              <a class="c-social-media__link" href="https://twitter.com/iamryanyu/">
                <svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612">
  <path d="M612 116.258a250.714 250.714 0 0 1-72.088 19.772c25.929-15.527 45.777-40.155 55.184-69.411-24.322 14.379-51.169 24.82-79.775 30.48-22.907-24.437-55.49-39.658-91.63-39.658-69.334 0-125.551 56.217-125.551 125.513 0 9.828 1.109 19.427 3.251 28.606-104.326-5.24-196.835-55.223-258.75-131.174-10.823 18.51-16.98 40.078-16.98 63.101 0 43.559 22.181 81.993 55.835 104.479a125.556 125.556 0 0 1-56.867-15.756v1.568c0 60.806 43.291 111.554 100.693 123.104-10.517 2.83-21.607 4.398-33.08 4.398-8.107 0-15.947-.803-23.634-2.333 15.985 49.907 62.336 86.199 117.253 87.194-42.947 33.654-97.099 53.655-155.916 53.655-10.134 0-20.116-.612-29.944-1.721 55.567 35.681 121.536 56.485 192.438 56.485 230.948 0 357.188-191.291 357.188-357.188l-.421-16.253c24.666-17.593 46.005-39.697 62.794-64.861z"/>
</svg>
              </a>
            </li>
            <li class="c-social-media__item">
              <a class="c-social-media__link" href="https://www.linkedin.com/in/ryan-yu-8748325a/">
                <svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 430.117 430.117">
  <path d="M430.117 261.543V420.56h-92.188V272.193c0-37.271-13.334-62.707-46.703-62.707-25.473 0-40.632 17.142-47.301 33.724-2.432 5.928-3.058 14.179-3.058 22.477V420.56h-92.219s1.242-251.285 0-277.32h92.21v39.309c-.187.294-.43.611-.606.896h.606v-.896c12.251-18.869 34.13-45.824 83.102-45.824 60.673-.001 106.157 39.636 106.157 124.818zM52.183 9.558C20.635 9.558 0 30.251 0 57.463c0 26.619 20.038 47.94 50.959 47.94h.616c32.159 0 52.159-21.317 52.159-47.94-.606-27.212-20-47.905-51.551-47.905zM5.477 420.56h92.184V143.24H5.477v277.32z"/>
</svg>
              </a>
            </li>
            <li class="c-social-media__item">
              <a class="c-social-media__link" href="https://codepen.io/iamryanyu/">
                <svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" width="31.665" height="31.665" viewBox="0 0 31.665 31.665"><path d="M16.878.415a2.501 2.501 0 0 0-2.809.034L1.485 9.214a2.5 2.5 0 0 0-1.071 2.052v9.444c0 .84.421 1.623 1.122 2.086l12.79 8.455a2.5 2.5 0 0 0 2.758 0l13.044-8.618a2.501 2.501 0 0 0 1.122-2.086v-9.279a2.5 2.5 0 0 0-1.121-2.085L16.878.415zm9.743 10.23L21.8 13.882l-4.521-3.288-.029-6.467 9.371 6.518zM13.979 4.133v6.329l-4.633 3.24-4.621-3.099 9.254-6.47zM3.458 13.722l2.991 2.004-2.991 2.093v-4.097zm10.6 13.493l-9.331-6.258 4.661-3.258 4.67 3.133v6.383zm-1.772-11.541l3.021-2.113 3.519 2.313-3.119 2.095-3.421-2.295zm5.068 11.541V20.83l4.463-2.991 4.805 3.159-9.268 6.217zm10.6-9.288l-3.168-2.082 3.168-2.125v4.207z"/></svg>
              </a>
            </li>
            <li class="c-social-media__item">
              <a class="c-social-media__link" href="https://github.com/iamryanyu/">
                <svg class="c-social-media__icon" xmlns="http://www.w3.org/2000/svg" width="438.549" height="438.549" viewBox="0 0 438.549 438.549"><path d="M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 0 1-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"/></svg>
              </a>
            </li>
          </ul>
        </div>
      </dd>
    </dl>
  </div>
</div>
/**
 * Variables
 */

//* Colors *//
// Black
$black: hsla(0, 0%, 0%, 1);
// White
$white: hsla(0, 0%, 100%, 1);
$lily-white: hsla(0, 0%, 92%, 1);
// Gray
$gray: hsla(0, 0%, 50%, 1);
$mischka: hsla(217, 17%, 85%, 1); // #d2d7df
$light-grey: hsla(0, 0%, 83%, 1);
// Yellow
$fuel-yellow: hsla(39, 84%, 53%, 1); // #eca320
// Blue
$united-nations-blue: hsla(213, 90%, 64%, 1); // #509cf6

//* Font size *//
$baseFontSize: 16;

/**
 * Functions
 */

@function rem($pixels) {
  @return $pixels / $baseFontSize * 1rem;
}

/**
 * Placeholder
 */

%button-reset {
  align-items: center;
  background-color: transparent;
  border: 0;
  box-sizing: border-box;
  color: currentColor;
  display: flex;
  justify-content: center;
  margin: 0;
  outline: unset;
  padding: 0;
  text-decoration: none;
}

%list-reset {
  list-style: none;
  margin: 0;
  padding: 0;
}

/**
 * Mixins
 */

@mixin button-3d($color) {
  box-shadow: 0px 4px darken($color, 20%);
}

/**
 * Elements
 */

body {
  background: #22c1c3;  /* fallback for old browsers */
  background: -webkit-linear-gradient(to right, #fdbb2d, #22c1c3);  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #fdbb2d, #22c1c3); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

/**
 * Objects
 */

.o-grid {
  display: grid;
  grid-gap: rem(10);
  grid-template-areas: "header header header"
                       "main main sidebar"
                       "footer footer footer";
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 20% 1fr 20%;
}

.o-grid__item {
  background-color: $mischka;
}

.o-grid__header {
  align-items: center;
  justify-content: flex-end;
  display: flex;
  grid-area: header;
  padding: rem(20);
}

.o-grid__main {
  grid-area: main;
  padding: rem(50);
}

.o-grid__sidebar {
  grid-area: sidebar;
  padding: rem(20);
}

.o-grid__footer {
  align-items: center;
  display: flex;
  grid-area: footer;
  justify-content: space-between;
  padding: rem(20);
}

/**
 * Components style
 */

/* Button */
.c-btn {
  background-color: transparent;
  border: 0;
  border-radius: rem(3);
  color: $black;
  padding: rem(5) rem(10);
  text-decoration: none;
}

.c-btn--large {
  font-size: rem(25);
}

.c-btn--3d {
  &.c-btn--yellow {
    @include button-3d($fuel-yellow);
  }
  
  &.c-btn--blue {
    @include button-3d($united-nations-blue);
  }
}

.c-btn--yellow {
  background-color: $fuel-yellow;
}

.c-btn--blue {
  background-color: $united-nations-blue;
  color: $white;
}
  
/* Arrow */
.c-arrow {
  pointer-events: none;
  
  .p-sidebar-menu__item & {
    margin: rem(-6) rem(10) 0 rem(3);
    left: 0;
    right: auto;
    transform: rotate(90deg) scale(0.6);
  }
}

.c-arrow__left,
.c-arrow__right {
  background-color: var(--icon-bg-color);
  display: block;
  height: 2px;
  position: absolute;
  right: rem(20);
  top: calc(50% - 1px);
  transition: transform 0.5s ease, background-color 0.5s ease;
  width: rem(12);
  
  .p-sidebar-menu & {
    right: 0;
  }
  
  .p-sidebar-menu__item & {
    left: 0;
    right: auto;
  }
}

.c-arrow__left {
  transform: translateX(rem(3)) rotate(50deg);
  
  .c-accordion__trigger[aria-expanded='false'] & {
    transform: translateX(rem(-3)) rotate(50deg);
  }
}

.c-arrow__right {
  transform: translateX(rem(-4)) rotate(-50deg);
  
  .c-accordion__trigger[aria-expanded='false'] & {
    transform: translateX(rem(4)) rotate(-50deg);
  }
}

/* Accordion */
.c-accordion {
  // Default themes
  --default-heading-bg-color: transparent;
  --default-heading-font-color: hsla(0, 0%, 0%, 1);
  --default-heading-border-color: transparent;
  --default-icon-bg-color: hsla(0, 0%, 50%, 1);
  --default-panel-bg-color: transparent;
  --default-panel-font-color: hsla(0, 0%, 0%, 1);
  // Default themes
  --heading-bg-color: var(--default-heading-bg-color);
  --heading-font-color: var(--default-heading-font-color);
  --heading-border-color: var(--default-heading-border-color);
  --icon-bg-color: var(--default-icon-bg-color);
  --panel-bg-color: var(--default-panel-bg-color);
  --panel-font-color: var(--default-panel-font-color);
  
  margin: 0;
}

.c-accordion--light {
  // Light themes
  --light-heading-bg-color: hsla(0, 0%, 93%, 1);
  --light-heading-font-color: hsla(0, 0%, 0%, 1);
  --light-heading-border-color: hsla(0, 0%, 85%, 1);
  --light-icon-bg-color: hsla(0, 0%, 50%, 1);
  --light-panel-bg-color: hsla(0, 0%, 100%, 1);
  --light-panel-font-color: hsla(0, 0%, 0%, 1);
  
  --heading-bg-color: var(--light-heading-bg-color);
  --heading-font-color: var(--light-heading-font-color);
  --heading-border-color: var(--light-heading-border-color);
  --icon-bg-color: var(--light-icon-bg-color);
  --panel-bg-color: var(--light-panel-bg-color);
  --panel-font-color: var(--light-panel-font-color);
}

.c-accordion--dark {
  // Dark themes
  --dark-heading-bg-color: hsla(0, 0%, 40%, 1);
  --dark-heading-font-color: hsla(0, 0%, 100%, 1);
  --dark-heading-border-color: hsla(0, 0%, 35%, 1);
  --dark-icon-bg-color: hsla(0, 0%, 100%, 1);
  --dark-panel-bg-color: hsla(0, 0%, 50%, 1);
  --dark-panel-font-color: hsla(0, 0%, 100%, 1);
  
  --heading-bg-color: var(--dark-heading-bg-color);
  --heading-font-color: var(--dark-heading-font-color);
  --heading-border-color: var(--dark-heading-border-color);
  --icon-bg-color: var(--dark-icon-bg-color);
  --panel-bg-color: var(--dark-panel-bg-color);
  --panel-font-color: var(--dark-panel-font-color);
}

.c-accordion__trigger {
  @extend %button-reset;
  background-color: var(--heading-bg-color);
  border-top: 1px solid var(--heading-border-color);
  display: block;
  padding: rem(20);
  position: relative;
  text-align: left;
  transition: background-color 0.5s ease, border-color 0.5s ease;
  width: 100%;
  
  .c-accordion--disable & {
    cursor: default;
  }
}

.c-accordion__heading {
  color: var(--heading-font-color);
  pointer-events: none;
  transition: color 0.5s ease;
}

.c-accordion__panel {
  background-color: var(--panel-bg-color);
  color: var(--panel-font-color);
  margin: 0;
  padding: 0 rem(20);
  overflow: hidden;
  transition: background-color 0.5s ease, color 0.5s ease;
}

/* Social media */
.c-social-media__list {
  @extend %list-reset;
  display: flex;
}

.c-social-media__item {
  margin: 0 rem(5);
}

.c-social-media__link {
  background-color: $black;
  border-radius: 50%;
  color: $white;
  display: block;
  height: rem(24);
  padding: rem(10);
  transition: background-color 0.6s ease, color 0.6s ease;
  width: rem(24);
  
  &:hover {
    background-color: $white;
    color: $black;
  }
}

.c-social-media__icon {
  fill: currentColor;
  height: 100%;
  width: 100%;
}

/**
 * Patterns
 */

.p-layout {
  background-color: $white;
  margin: rem(50) auto;
  width: 90%;
}

.p-sidebar-menu__button {
  padding-left: 0;
  padding-right: 0;
}

.p-sidebar-menu__panel {
  border-bottom: 1px solid $gray;
  padding: 0;
}

.p-sidebar-menu__list {
  @extend %list-reset;
  margin-bottom: rem(20);
}

.p-sidebar-menu__item {
  display: flex;
  padding: rem(10) 0;
  position: relative;
}

.p-sidebar-menu__link {
  color: $gray;
  font-size: rem(14);

  &:hover {
    text-decoration: none;
  }
}
View Compiled
/**
 * Accordion
 */

const accordions = [...document.querySelectorAll('.c-accordion:not(.c-accordion--disable)')];
const accordionTriggers = [...document.querySelectorAll('.c-accordion__trigger')];
const accordionPanels = [...document.querySelectorAll('.c-accordion__panel')];
const speed = 0.5;

const toggleAccordion = (accordionBtn, target, isTargetExpanded, isSingle = false) => {
  if (isSingle) {
    const thisAccordionPanels = [...accordionBtn.closest('.c-accordion').querySelectorAll('.c-accordion__panel')];
    const panelIndex = thisAccordionPanels.findIndex(panel => panel.id === target.id);
    const newAccordionPanels = [
      ...thisAccordionPanels.slice(0, panelIndex),
      ...thisAccordionPanels.slice(panelIndex + 1)
    ];

    TweenMax.to(newAccordionPanels, speed, {
      height: 0,
      ease: Bounce.easeOut,
      onUpdate:() => {
        accordionTriggers.map(trigger => {
          trigger.setAttribute('aria-expanded', false);
        });
      },
    });
  }

  if (isTargetExpanded === true) { 
    //console.log('collaps1', target);
    // collapse
    TweenMax.to(target, speed, {
      height: 0,
      ease: Bounce.easeOut,
      onUpdate:() => {
        accordionBtn.setAttribute('aria-expanded', false);
      },
    });
  } else {
    //console.log('expand', target);
    // expand
    TweenMax.set(target, {
      height: 'auto',
    });

    TweenMax.from(target, speed, {
      height: 0,
      ease: Elastic.easeOut.config(1, 0.75),
      onUpdate:() => {
        accordionBtn.setAttribute('aria-expanded', true);
      },
    });
  }
}

const handleAccordion = (e) => {
  e.preventDefault();
  
  const accordionBtn = e.target;
  const isSingle = e.target.closest('.c-accordion').classList.contains('c-accordion--single');
  
  // Trigger the accordion button
  if (e.target.classList.contains('c-accordion__trigger')) {
    let target = document.getElementById(e.target.getAttribute('aria-controls'));
    let isTargetExpanded  = e.target.getAttribute('aria-expanded') === 'true' ? true : false;
    
    toggleAccordion(accordionBtn, target, isTargetExpanded, isSingle);
  }
};

const keyboardAccordion = (e) => {
  const target = e.target;
  const key = e.which.toString();
  
  // 38: Up, 40: Down
  if (target.classList.contains('c-accordion__trigger')) {
    if (key.match(/38|40/)) {
      const index = accordionTriggers.indexOf(target);
      const length = accordionTriggers.length;
      const direction = (key.match(/40/)) ? 1 : -1;
      const newIndex = (index + length + direction) % length;
      
      accordionTriggers[newIndex].focus();
      
      e.preventDefault();
    }
  }
};

const accordionInit = () => {
  accordionTriggers.map(accordionBtn => {
    let target = document.getElementById(accordionBtn.getAttribute('aria-controls'));
    let isTargetExpanded  = accordionBtn.getAttribute('aria-expanded') === 'true' ? false : true;
    console.log(accordionBtn);
    toggleAccordion(accordionBtn, target, isTargetExpanded);
  });
};

accordions.map(accordion => {
  accordion.addEventListener('click', handleAccordion);
  accordion.addEventListener('keydown', keyboardAccordion);
});

// Init
accordionInit();

/**
 * Theme Switch
 */

const themeSwitchers = [...document.querySelectorAll('.js-theme-switch')];
const accordion = document.querySelector('.c-accordion');
const themeValues = [
  'heading-bg-color',
  'heading-font-color',
  'heading-border-color',
  'icon-bg-color',
  'panel-bg-color',
  'panel-font-color',
];

const getThemeColors = (themeVal) => {
  return getComputedStyle(accordion).getPropertyValue(themeVal);
};

const setThemeColors = (theme) => {
  themeValues.map(themeVal => {
    accordion.style.setProperty(`--${themeVal}`, getThemeColors(`--${theme}-${themeVal}`));
  });
}

const handleThemeSwitch = (e) => {
  if (e.target.classList.contains('c-theme-switch__light')) {
    // light theme
    setThemeColors('light');
  } else {
    // dark theme
    setThemeColors('dark');
  }
};

themeSwitchers.map(switcher => {
  switcher.addEventListener('click', handleThemeSwitch);                   
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.4/TweenMax.min.js