$toggle-spacing:           5px !default;
$toggle-bars-width:        2rem !default;
$toggle-bar-width:         2rem !default;
$toggle-bar-height:        4px !default;
$toggle-bar-spacing:       6px !default;
$toggle-bar-color:         #fff !default;
$toggle-bar-border-radius: 6px !default;
$toggle-bars-height:       ($toggle-bar-height * 3) + ($toggle-bar-spacing * 2);

.toggle {
  display: flex;
  margin: $toggle-spacing;
  cursor: pointer;
  background: transparent;
  border: none;
  transition: .5s ease-in-out;
  transform: rotate(0deg);

  &:focus {
    outline: none;
  }

  .c-button__text{
    display: flex;
  }

  .bars {
    position: relative;
    flex-shrink: 0;
    width: $toggle-bars-width;
    height: $toggle-bars-height;
  }

  .bar {
    position: absolute;
    left: 0;
    display: block;
    width: 100%;
    height: $toggle-bar-height;
    background: $toggle-bar-color;
    border-radius: $toggle-bar-border-radius;
    opacity: 1;
    transition: .25s ease-in-out;
    transform: rotate(0deg);

    &:nth-child(1) {
      top: 0;
    }

    &:nth-child(2),
    &:nth-child(3) {
      top: $toggle-bar-height + $toggle-bar-spacing;
    }

    &:nth-child(4) {
      top: ($toggle-bar-height + $toggle-bar-spacing) * 2;
    }
  }

  &[aria-expanded="true"],
  &.close,
  &.is-active {
    .bar:nth-child(1) {
      top: 18px;
      left: 50%;
      width: 0%;
    }

    .bar:nth-child(2) {
      transform: rotate(45deg);
    }

    .bar:nth-child(3) {
      transform: rotate(-45deg);
    }

    .bar:nth-child(4) {
      top: 18px;
      left: 50%;
      width: 0%;
    }
  }
}