@layer reset {
  * {
    margin: 0;
    padding: 0;
  }

  html, body {
    height: 100%;
  }
}

@layer base-color {
  :root {
    --text-color: #ccc;
    --bg-color: #121212;
    --primary: #FFCA28;
  }
}

@layer utilities {
  .text-center {text-align:center}
  .mt-0\.5em {margin-top: 0.5em}
  .mt-1em {margin-top: 1em}
  .flex-column {display: flex;flex-direction:column;align-items:center;}
}

@layer components {
  [data-role="toggle-switch"] {
    display: inline-block;
    width: 46px;
    height: 20px;
    background-color: rgba(255,255,255,0.15);
    border-radius: 15px;
    position: relative;
    cursor: pointer;

    &::before {
      content: '';
      display: inline-block;
      position: absolute;
      width: 20px;
      height: 20px;
      background-color: var(--text-color);
      border-radius: 50%;
      left: 0;
      top: 0
    }
  }
}

body {
  color: var(--text-color);
  background-color: var(--bg-color);
}

#app {
  width: 100%;
  height: 100%;
  position: fixed;
  inset: 0;
  display: grid;
  place-content: center;
  opacity: 0;

  .label {
    display: none;
    font-size: 0.8em;
  }

  button[data-cmd="push"] {
    padding: 0.75em 2em;
    border-radius: 6px;
    border: 0;
    background-color: var(--primary);
    cursor: pointer;
  }

  &.ready {
    animation-name: animate-fade-in;
    animation-duration: 500ms;
    animation-fill-mode: both;
    animation-timing-function: linear;
    animation-iteration-count: 1;
  }

  &.notification-on {
    [data-role="toggle-switch"] {
      &::before {
        left: auto;
        right: 0;
        background-color: var(--primary);
      }
    }

    .show-if-notification-on {
      display: inline-block;
    }
  }

  &.notification-off {
    .show-if-notification-off {
      display: inline-block;
    }
  }
}

@keyframes animate-fade-in {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}