@import "tachyons";

/* Debugging */
/* @import "tachyons/src/_debug-children"; */
/* @import "tachyons/src/_debug-grid"; */

/* Uncomment out the line below to help debug layout issues */
/* @import "tachyons/src/_debug"; */

@import "syntax";

html {
  scroll-behavior: smooth;
}

.header ul {
  clear: both;
  max-height: 0;
  transition: max-height 0.2s ease-out;
}

/* menu icon */
.header .menu-icon .navicon {
  display: block;
  height: 2px;
  position: relative;
  transition: background 0.2s ease-out;
  width: 18px;
  &::before,
  &::after {
    background: #ebdbb2;
    content: "";
    display: block;
    height: 100%;
    position: absolute;
    transition: all 0.2s ease-out;
    width: 100%;
  }
  &:before {
    top: 6px;
  }
  &:after {
    top: -6px;
  }
}

/* menu btn */
.header .menu-btn:checked ~ .menu-icon .navicon {
  background: transparent;
  &:before {
    transform: rotate(-45deg);
  }
  &:after {
    transform: rotate(45deg);
  }
}

.header .menu-btn:checked ~ .menu-icon:not(.steps) .navicon {
  &:before,
  &:after {
    top: 0;
  }
}

.header .menu-btn:checked ~ ul {
  max-height: 240px;
}

@media screen and (min-width: 30em) {
  .header ul {
    clear: none;
    float: right;
    max-height: none;
  }
}

.w3-theme-l5 {
  color: #000;
  background-color: #f7fcf5;
}
.w3-theme-l4 {
  color: #000;
  background-color: #e4f4dc;
}
.w3-theme-l3 {
  color: #000;
  background-color: #c9e9ba;
}
.w3-theme-l2 {
  color: #000;
  background-color: #aedd97;
}
.w3-theme-l1 {
  color: #000;
  background-color: #94d274;
}
.w3-theme-d1 {
  color: #fff;
  background-color: #69bf3e;
}
.w3-theme-d2 {
  color: #fff;
  background-color: #5da937;
}
.w3-theme-d3 {
  color: #fff;
  background-color: #519430;
}
.w3-theme-d4 {
  color: #fff;
  background-color: #467f29;
}
.w3-theme-d5 {
  color: #fff;
  background-color: #3a6a22;
}

.w3-theme-light {
  color: #000;
  background-color: #f7fcf5;
}
.w3-theme-dark {
  color: #fff;
  background-color: #3a6a22;
}
.w3-theme-action {
  color: #fff;
  background-color: #3a6a22;
}

.w3-theme {
  color: #fff;
  background-color: #79c753;
}
.w3-text-theme {
  color: #79c753;
}
.w3-theme-border {
  border-color: #79c753;
}
.w3-hover-theme:hover {
  color: #fff;
  background-color: #79c753;
}
// Extra sizes
.mw-20 {
  max-width: 20rem;
}
@media screen and (min-width: 30em) {
  .mw-20-ns {
    max-width: 20rem;
  }
}

// TABLES
table:not(.u-legend) {
  @extend .w-100, .mw8, .center, .pv2;
  tr {
    @extend .stripe-dark;
  }
  th {
    @extend .w3-theme-l4;
  }
  th,
  td {
    @extend .ph3, .pv2;
  }
}