@import "../mixins/grid/column.css";
@import "../mixins/utils/border-box.css";
@import "../mixins/text/h3.css";
@import "../mixins/text/h4.css";
@import "../mixins/links/positive.css";
@import "../mixins/links/neutral.css";
@import "../mixins/buttons/base.css";

.menu {
  @mixin border-box;
  @mixin column 2;

  padding: 2rem;
  background-color: $thunder;

  & ul {
    margin:     0;
    padding:    0;
    list-style: none;
  }

}

.menu__title {
  @mixin h3;
  color: white;
}

.menu__item__link {
  @mixin h4;

  color: white;
  text-decoration: none;
}

.menu-trigger {
  box-sizing: border-box;
  position:   absolute;
  top:        0;
  left:       -6rem;
  padding:    2rem;
  background: $pampas;
  font-size:  3rem;

  &:hover {
    cursor: pointer;
  }

  & span {
    color:      $mountain;
    transition: all .2s ease-in;
  }

  .menu-active & span {
    transform: rotateZ(90deg);
    color: $caribbean;
  }
}

.code-options {
  display:        flex;
  flex-direction: row;
  margin:         0;
  padding:        3.3rem 2rem;
  list-style:     none;
}

.code-options__item__link {
  padding: 0 2rem;
}

.code-options__item__link {
  @mixin link-neutral;
  display: block;
}

.code-options__item__link--active {
  @mixin link-positive;
  display: block;
}