/* https://www.linkedin.com/posts/lucaslimasz_mobile-frontend-css-activity-7145756695661625345-lyl9?utm_source=share&utm_medium=member_android */

:root {
  --bg: #010101;
  --fg: #fff;

  --nav-fg: var(--fg);
  --nav-bg: #171717;
  --nav-bg-active: #393939;

  --font: 1rem sans-serif;
  --border-color: #393939;
  --border-radius: 2rem;
}

*,
::after,
::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  height: 100svh;
  font: var(--font);
  background: var(--bg);
  color: var(--fg);
}

#app {
  max-width: 720px;
  margin: 1rem auto;
  @media(width < 720px) {
    margin: 1rem;
  }
}

canvas {
  display: block;
  margin: auto;
}

h2 {
  font-size: 1rem;
  font-weight: normal;
  margin: 0 0 1.5rem 1.5rem;
}

nav {
  display: flex;
  flex-direction: column;
  margin-bottom: 2rem;

  &:last-of-type {
    margin-bottom: 0;
  }

  a {
    position: relative;
    padding: 1.5rem;
    background: var(--nav-bg);
    color: var(--nav-fg);
    text-decoration: none;
    transition: all .2s;

    &::after {
      content: '';
      position: absolute;
      width: calc(100% - 3rem);
      left: 1.5rem;
      bottom: 0;
      display: block;
      height: 1px;
      background: var(--border-color);
    }

    &:first-of-type {
      border-radius: var(--border-radius) var(--border-radius) 0 0;
    }

    &:last-of-type {
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      border: none;
    }

    &:last-of-type::after {
      display: none;
    }

    &:hover, &:active {
      background-color: var(--nav-bg-active);
    }
  }

  &:hover {
    a::after {
      display: none;
    }
  }
}

#controller {
  display: grid;
  grid-template-areas: "up . ."
  'down left right';
  gap: 1rem;
  position: absolute;
  bottom: 1rem;
  left: 1rem;
  width: calc(100vw - 2rem);

  .up {
    grid-area: up;
    border-top-left-radius: 0;
  }

  .down {
    grid-area: down;
    border-bottom-left-radius: 0;
  }

  .left {
    grid-area: left;
    border-bottom-right-radius: 0;
  }

  .right {
    grid-area: right;
    border-bottom-left-radius: 0;
  }

  button {
    display: flex;
    place-content: center;
    place-items: center;
    flex-grow: 1;
    height: 96px;
    background: transparent;
    border: 4px solid var(--fg);
    border-radius: var(--border-radius);
    color: var(--fg);
    /* transition: all .2s; */

    &:hover, &:active {
      cursor: pointer;
      /* background: rgba(255 255 255 / .1); */
    }

    &:active {
      transform: scale(.95);
    }
    
    .icon {
      position: relative;
      display: block;
      transform: scale(2);
      width: 22px;
      height: 22px;
      border: 2px solid transparent;
      border-radius: 100px;
    }

    .icon::after {
      content: '';
      display: block;
      box-sizing: border-box;
      position: absolute;
      width: 10px;
      height: 10px;
    }

    .up::after {
      border-top: 2px solid;
      border-right: 2px solid;
      transform: rotate(-45deg);
      left: 4px;
      bottom: 2px
    }

    .down::after {
      border-bottom: 2px solid;
      border-right: 2px solid;
      transform: rotate(45deg);
      left: 4px;
      top: 2px
    } 

    .left::after {
      border-bottom: 2px solid;
      border-left: 2px solid;
      transform: rotate(45deg);
      left: 6px;
      top: 4px
    }

    .right::after {
      border-bottom: 2px solid;
      border-right: 2px solid;
      transform: rotate(-45deg);
      right: 6px;
      top: 4px
    }
  }
}