@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;
  }
}

.comment {
  @extend .mv2, .pl3, .bl, .bw1, .w3-theme-border, .relative;
  h3,
  h4,
  h5,
  h6 {
    @extend .mv0, .pl2;
    &::before {
      font-family: "Font Awesome 6 Free";
      color: #79c753;
      content: "\f075";
      font-weight: 900;
      font-size: 2rem;
      position: absolute;
      left: -0.75rem;
      top: -1rem;
      transform: scaleX(-1);
    }
  }
}

/* gallery
// https://lubna.dev/articles/create-css-only-image-gallery/
// box-sizing setup is part of tachyons
// * {
//   box-sizing: border-box;
// } */

$max-img-width: 72rem;
$max-img-height: 48rem;

.gallery {
  display: flex;
  margin: 10px auto;
  max-width: $max-img-width;
  position: relative;
  padding-top: $max-img-height/$max-img-width * 100%;

  @media screen and (min-width: $max-img-width) {
    padding-top: $max-img-height;
  }

  &__img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }

  &__thumb {
    padding-top: 6px;
    margin: 6px;
    display: block;
  }

  &__selector {
    position: absolute;
    opacity: 0;
    visibility: hidden;

    &:checked {
      + .gallery__img {
        opacity: 1;
      }
      ~ .gallery__thumb > img {
        box-shadow: 0 0 0 3px #0be2f6;
      }
    }
  }
}