.c-menu-button {
  appearance: none;
  @include flex(center, center);
  width: 40px;
  height: 40px;
  padding: 0;
  background-color: transparent;
  border: 2px solid white;
  border-radius: 50%;
  cursor: pointer;
  transition: border 0.2s;

  > * {
    width: 4px;
    height: 4px;
    display: inline-block;
    border-radius: 50%;
    background-color: white;
    transition: background-color 0.2s;
  }

  > * + * {
    margin-left: 2px;
  }

  &:hover {
    box-shadow: 0 0 8px rgba(white, 0.5);
  }

  &:focus {
    outline: none;
    box-shadow: 0 0 8px white;
  }
}

.c-menu-button--mobile {
  position: fixed;
  @include z(z-menu-button);
  top: 25px;
  right: 25px;
  display: block;
  border: none;

  width: 50px;
  height: 50px;
  background-color: palette(primary);

  //&:before {
  //  $circleReducedRatio: 4px;
  //
  //  content: ''; 
  //  position: absolute;
  //  top: $circleReducedRatio;
  //  left: $circleReducedRatio;
  //  width: calc(100% - #{$circleReducedRatio * 2});
  //  height: calc(100% - #{$circleReducedRatio * 2});
  //  border: 1px solid white;
  //  border-radius: 50%;
  //}

  > * {
    width: 42%;
    height: 3px;
    display: block;
    border-radius: 2px;

    margin-left: auto !important;
    margin-right: auto !important;
  }

  > * + * {
    margin-top: 3px;
  }

  @include mq($overlay-menu) {
    display: none;
  }
}