<div class="container">
  <header>
    <nav>
      <button type="button"><i data-feather="arrow-left"></i></button>
      <button type="button"><i data-feather="search"></i></button>
    </nav>
  </header>
  <main>
    <h1 class="t1">History</h1>
    <div class="toggle-group">
      <input id="today-date" type="radio" name="date-choose">
      <label for="today-date" class="t4">Today</label>
      <input id="yesterday-date" type="radio" name="date-choose" checked>
      <label for="yesterday-date" class="t4">Yesterday</label>
    </div>
    <div class="chart">
      <div class="chart-label">
        <span class="t2">45%</span>
        <span class="text-muted">saving</span>
      </div>
      <svg class="progress" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid meet">
        <circle r="40" cx="50" cy="50" stroke-width="7" fill="transparent" stroke="#E2E8F0"></circle>
        <circle id="chartfill" r="40" cx="50" cy="50" stroke-width="7" stroke-dasharray="245" stroke-dashoffset="245" fill="transparent" stroke="#D53F8C" stroke-linecap="round" class="meter"></circle>
            </svg>
    </div>
    <button id="btntransactions" class="t4 w-100">Show my transactions</button>
  </main>
  <nav>
    <a href="#" class="btn text-muted"><i data-feather="home"></i></a>
    <a href="#" class="btn text-muted"><i data-feather="credit-card"></i></a>
    <a href="#" class="btn text-muted active"><i data-feather="trending-up"></i></a>
    <a href="#" class="btn text-muted"><i data-feather="bell"></i></a>
  </nav>
</div>

// TODO: cleanup

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

$gray-100: hsla(210, 38%, 95%, 1);
$muted: hsla(214, 25%, 65%, 1);
$white: #ffffff;
$black: #4a5568;
$dark: #DFE4EA;
$shadow-tl: -4px -2px 4px 0px;
$shadow-br: 4px 2px 6px 0px;

$shadow: $shadow-tl $white, $shadow-br $dark;
$shadow-flip: $shadow-tl $dark inset, $shadow-br $white inset;

$radius: 3px;

html {
  font-size: 16px;
}
body {
  
  font-family: "Kulim Park", sans-serif;
  background-color: #f5f6f7;
  color: $black;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1rem 2rem;
}

a {
  color: $black;
}

.text-muted {
  color: $muted;
}

$sizes: 1.5rem, 1.25rem, 1rem, 0.85rem, 0.5rem;

@for $i from 1 through length($sizes) {
  .t#{$i} {
    font-size: nth($sizes, $i);
  }
}

.w-100 {
  width: 100%;
}

.container {
  height: 600px;
  width: 300px;
  padding: 1rem 1.5rem;
  border-radius: $radius;
  box-shadow: $shadow;
}

nav {
  display: flex;
  justify-content: space-between;
}

%button {
  color: inherit;
  position: relative;
  background: inherit;
  outline: none;
  border: none;
  box-shadow: $shadow;
  border-radius: $radius;
  cursor: pointer;
  text-transform: uppercase;
}

%button-focus {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  border-radius: $radius;
  box-shadow: 2px 2px 2px 0px $dark inset, -2px -2px 2px 0px $white inset;
}

button {
  @extend %button;
  padding: 0.5rem 0.75rem;

  &:focus,
  &:active {
    &::after {
      @extend %button-focus;
    }
  }

  svg.feather {
    color: $muted;
    width: 1.25rem;
    height: 1.25rem;
  }
}

.btn {
  @extend %button;
  padding: 0.5rem 0.75rem;

  &.active {
    color: $black;
    &::after {
      @extend %button-focus;
    }
  }
}

main {
  padding: 1.5rem 0.25rem;
}

.toggle-group {
  display: flex;
  justify-content: space-around;
  label {
    @extend %button;
    flex: 1;
    padding: 0.75rem;
    text-align: center;
    border-radius: 8px;

    &:first-of-type {
      margin-right: 1rem;
    }
  }
  input {
    display: none;
    &:checked {
      + label::after {
        @extend %button-focus;
        border-radius: 8px;
      }
    }
  }
}

.chart {
  position: relative;
  border-radius: 50%;
  margin: 2rem;
  box-shadow: $shadow;

  /* inner shadow */
  &::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    margin: 3rem;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    box-shadow: 2px 2px 2px 0px $dark inset, -2px -2px 2px 0px $white inset;
  }

  .chart-label {
    position: absolute;
    top: 0;
    bottom: 0.5rem;
    left: 0;
    right: 0;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    span {
      display: block;
    }
  }
}

#btntransactions {
  padding: 0.75rem;
}

#chartfill {
  animation: chart 500ms linear forwards;
}

@keyframes chart {
  from {
    stroke-dashoffset: 245;
  }
  to {
    stroke-dashoffset: 110;
  }
}

(function() {
  feather.replace()  
})();