@import "susy";

$susy: (
  columns: 12,
  column-width: 1.6em,
  gutters: 0,
  gutter-position: inside,
  global-box-sizing: border-box,
  math: static,
);

$col-bg: #333;
$col-black: black;
$col-white: ivory;
$col-red: tomato;

//box = 1.6 x 1.6
//bar = 12 boxes x .5 boxes
//height = 30 / 2 boxes
//circle = 1.4 x 1.4
  //margin top & outside = .2

html {
  background: $col-bg;
  box-sizing: border-box;
}
*, *::before, *::after {
  box-sizing: inherit;
  margin: 0; padding: 0;
}
.container {
  @include container;
  background: $col-white;
  height: span(15) + span(2);
  margin: auto;
  padding: span(1);
  position: absolute;
  top: 0; right: 0; bottom: 0; left: 0;
  width: span(12) + span(2);
}
.tawa {
  @include container;
  @include span(12 of 12);
  height: 100%;
  list-style-type: none;
}
.title {
  @include span(12 of 12);
  background: $col-bg;
  color: $col-white;
  margin-top: span(2);
  text-align: center;
  
  & a {
    color: $col-white;
    text-decoration: none;
  }
  & a:hover {
    color: $col-red;
    transition: color .333s;
  }
}
.tawa__row {
  @include container;
  @include span(12 of 12);
  height: span(.5);
}
.tawa__row:nth-of-type(odd) {
  background: $col-white;
  
  .tawa__row .tawa__row-bar,
  .tawa__row--circle-right,
  .tawa__row--circle-left,
  .tawa__row--circle {
    background: $col-black;
  }
  .tawa__row--circle-right::before,
  .tawa__row--circle-right::after,
  .tawa__row--circle-left::before,
  .tawa__row--circle-left::after,
  .tawa__row--circle::after {
    background: $col-white;
  }
  .tawa__row--circle-red {
    background: $col-black;
  }
  .tawa__row--circle-red::after {
    background: $col-red;
  }
}
.tawa__row:nth-of-type(even) {
  background: $col-black;
  
  .tawa__row .tawa__row-bar,
  .tawa__row--circle-right,
  .tawa__row--circle-left,
  .tawa__row--circle {
    background: $col-white;
  }
  .tawa__row--circle-right::before,
  .tawa__row--circle-right::after,
  .tawa__row--circle-left::before,
  .tawa__row--circle-left::after,
  .tawa__row--circle::after {
    background: $col-black;
  }
  .tawa__row--circle-red {
    background: $col-white;
  }
  .tawa__row--circle-red::after {
    background: $col-red;
  }
}
.tawa__row--bar-1,
.tawa__row--bar-2,
.tawa__row--bar-3,
.tawa__row--bar-4,
.tawa__row--bar-5,
.tawa__row--bar-6 {
  float: left;
  height: span(.5);
}
.tawa__row--bar-1 {
  @include span(1 of 12);
}
.tawa__row--bar-2 {
  @include span(2 of 12);
}
.tawa__row--bar-3 {
  @include span(3 of 12);
}
.tawa__row--bar-4 {
  @include span(4 of 12);
}
.tawa__row--bar-5 {
  @include span(5 of 12);
}
.tawa__row--bar-6 {
  @include span(6 of 12);
}
.tawa__row--circle-right {
  @include span(1 of 12);
  float: left;
  height: span(.5);
  position: relative;
  
  &::before {
    @include span(.5 of 1);
    content: '';
    height: span(.5 of 1);
    position: absolute;
    bottom: 0; left: 0;
  }
  
  &::after {
    @include span(.9 of 1);
    border-radius: 50%;
    content: '';
    height: span(.9 of 1);
    position: absolute;
    left: 0; bottom: 0em;
  }
}
.tawa__row--circle-left {
  @include span(1 of 12);
  float: left;
  height: span(.5);
  position: relative;
  
  &::before {
    @include span(.5 of 1);
    content: '';
    height: span(.5 of 1);
    position: absolute;
    bottom: 0; left: span(.5 of 1);
  }
  
  &::after {
    @include span(.9 of 1);
    border-radius: 50%;
    content: '';
    height: span(.9 of 1);
    position: absolute;
    bottom: 0em; left: span(.1 of 1);
  }
}
.tawa__row--circle,
.tawa__row--circle-red {
  @include span(1 of 12);
  float: left;
  height: span(.5);
  position: relative;
  
  &::after {
    @include span(.9 of 1);
    border-radius: 50%;
    content: '';
    height: span(.9 of 1);
    position: absolute;
    bottom: 0em; left: span(.05 of 1);
  }
}