@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@100..900&display=swap');


:root {
  --delta-color-xs: #ffff69;
  --delta-color-s: yellow;
  --delta-color-m: orange;
  --delta-color-l: red;

  --color-accent: #bf1313;
  --color-trips: #64effe;
  --color-mytrip: #03d980;
  --color-record: #f65c3d;
  --color-error: #be2000;

  --panel-bg-color: rgba(0,0,0,.85);
  --panel-box-shadow: 0 0 20px rgba(0,0,0,.25);

  --loader-bg-color: #d10000;
  --loader-height: 6px;
  --loader-speed: 1.25s;

  --border-radius-l: 20px;
  --border-radius-m: 14px;
  --border-radius-s: 10px;
  --border-radius-xs: 4px;

  --font-family: "Roboto Mono", sans-serif;
  --font-weight-bold: 700;
  --font-weight-regular: 400;
  --font-weight-light: 200;
}






*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,body{
  width: 100vw;
  height: 100vh;
  margin: 0;
  padding: 0;
}

body {
  
  
  /*
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  */
  background: #fff;
  transition: all .15s ease-in-out;

  font-family: var(--font-family);
  font-optical-sizing: auto;
  line-height: 1.5;
  color: #333;
}

main{
  width: 100%;
  height: 100%;
  overflow: hidden;

  &[class*="preparing"]{
    #messages{
      bottom: 80px;
    }
  }
  &[class*="recording"]{
    #messages{
      bottom: 80px;
    }
  }
}




#map { 
  width: calc( 100vw - 20px);
  height: calc( 100vh - 20px);
  margin: 10px;
  border-radius: var(--border-radius-l);
  overflow: hidden;

  .map-tooltip{
    /*border: 1px solid rgba(0,0,0,.25);*/
    border: none;
    border-radius: var(--border-radius-s);
    padding: 5px 8px 1px 8px;
    font-size: 11px;
    font-weight: var(--font-weight-regular);
    box-shadow: 0px 3px 6px rgba(0,0,0,.25);

    font-family: var(--font-family);

    &[class*="--list"]{
      padding: 10px;
      background: var(--color-trips);
      &:before{
        border-top-color: var(--color-trips);
      }
    }
  }
  
}
.shake-delta--xs{
  color: #222;
  background: var(--delta-color-xs);
  span{
    color: var(--delta-color-xs);
  }
  &:before{
    border-top-color: var(--delta-color-xs);
  }
}
.shake-delta--s{
  color: #222;
  background: var(--delta-color-s);
  span{
    color: var(--delta-color-s);
  }
  &:before{
    border-top-color: var(--delta-color-s);
  }
}
.shake-delta--m{
  color: #222;
  background: var(--delta-color-m);
  span{
    color: var(--delta-color-m);
  }
  &:before{
    border-top-color: var(--delta-color-m);
  }
}
.shake-delta--l{
  color: #fff;
  background: var(--delta-color-l);
  span{
    color: var(--delta-color-l);
  }
  &:before{
    border-top-color: var(--delta-color-l);
  }
}



button{
  padding: 10px 15px;
  border: none;
  border-radius: var(--border-radius-xs);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  box-shadow: 0 0 16px rgba(0,0,0,.5);
  transition: all .2s ease-in-out;
  white-space: nowrap;

  font-family: var(--font-family);

  &:empty{
    display: none;
  }

  &[id="back-btn"],
  &[id="rec-btn"]{
    background: var(--color-record);
    color: #fff;
  }

  &[id="rec-btn"]{
    flex: 2;
    svg{
      width: 24px;
      height: 24px;
      vertical-align: text-bottom;
      polygon{
        fill: white;
      }
      path{
        stroke: white;
      }
    }
  }
  &[id="back-btn"]{
    flex: 1;
  }

  &[id="get-btn"]{
    background: var(--color-trips);
    color: #222;
  }

  &[id="get-modal-btn"]{
    background: var(--color-trips);
    color: #fff;
  }

  &[id="list-btn"]{
    background: var(--color-trips);
    width: fit-content;
    flex: 3;
  }
  &[class*="load-btn"]{
    width: 100%;
    margin: 10px 0 0 0;
    padding: 10px;
    color: #222;
    text-align: left;
    box-shadow: none;

    &[class*="current"]{
      background: var(--color-trips);
      border: 1px solid #ddd;
      box-shadow: var(--panel-box-shadow);

      strong{
        color: var(--color-accent);
      }
    }

    small{
      font-weight: var(--font-weight-regular);
    }
  }

  &[class*="preparing"]{
    justify-content: space-between;
    animation: recording 2s infinite;
  }
  &[class*="recording"]{
    background: var(--color-record);
    color: #fff;
    font-size: 24px;
    display: flex;
    justify-content: space-between;
    animation: recording 2s infinite;

    /*
    &:after{
      position: absolute;
      margin: 0 0 0 10px;
      font-size: 30px;
      line-height: 18px;
      content: "•";
      color: white;
      
    }
      */
  }


  &[id="save-btn"]{
    background: var(--color-mytrip);
    color: #222;
  }

  &[id="publish-btn"]{
    background: var(--color-mytrip);
    color: #fff;
    flex: 12;
  }

  &[id="msg-close-btn"]{
    position: absolute;
    top: -20px;
    right: 15px;
    width: 40px;
    height: 40px;
    font-size: 17px;
    font-weight: 300;
    background: #fff;
    color: #222;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: var(--panel-box-shadow);
  }
  &[id="cancel-btn"]{
    position: absolute;
    top: -20px;
    right: -20px;
    width: 50px;
    height: 50px;
    font-size: 20px;
    font-weight: 300;
    background: #222;
    color: #fff;
    border-radius: 50%;
  }

  &:active{
    color: #fff;
    background: #222;
  }

  &[disabled]{
    background: #999;
    color: #333;
    text-decoration: line-through;
    cursor: not-allowed;
  }
}





.bars{
  position: fixed;
  z-index: 2011;
  left: 0;
  /*bottom: 60px;*/
  top: 0;

  width: calc( 100% - 20px );
  height: 110px;
  margin: 10px 10px;
  padding: 10px 15px;

  background: var(--panel-bg-color);
  box-shadow: var(--panel-box-shadow);
  border-radius: var(--border-radius-s);
  border: 2px solid #000;
  

  transition: all .25s ease-in-out;

  overflow-x: auto;
  overflow-y: visible;

  [class*='-wrapper']{
    width: min-content;
    height: 100%;

    
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    flex-wrap: nowrap;
    
    overflow-x: auto;
    overflow-y: visible;
    white-space: nowrap;
  }

  .bar{
    position: relative;
    flex: 10 0 auto;
    width: 6.5px;
    margin: 0 3px 0 4px;
    min-height: 5px;
    border-radius: 4px;
    transition: all .25s ease-in-out;

    &[class*="--point"]{
      background: rgba(255,255,255,.75);
    }
    &[class*="--shake"]{
      /*background: #fff !important;*/
    }

    &:hover{
      opacity: 1;
      cursor: pointer;
      background: #fff;

      span{
        color: #fff;
      }
    }

    span{
      display: none;
      position: absolute;
      z-index: 1000;
      bottom: 71px;
      right: -9px;
      font-size: 9px;
      line-height: 9px;
      transform: rotate(-90deg);
      transition: all .25s ease-in-out;
    }
  }
}




#list-modal,
#save-modal{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  display: none;
  justify-content: center;
  align-items: center;

  &[class*='active']{
    display: flex;
    background: var(--panel-bg-color);
  }

  .modal-wrapper{
    position: relative;
    max-width: 500px;
    min-width: 300px;
    margin: 20px;
    padding: 20px 20px 5px 20px;
    
    border-radius: var(--border-radius-s);
    box-shadow: var(--panel-box-shadow);
    border: 2px solid #fff;

    h2{
      margin: 0 0 30px 0;
      padding: 0 0 20px 0;
      line-height: 1;
      border-bottom: 1px dashed #ccc;
    }
    h4{
      margin: 20px 0 7px 0;
      font-size: 14px;
    }
    fieldset{
      position: relative;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 1px 0;
      padding: 10px 15px 12px 15px;
      border: none;
      background: #f3f3f3;

      &:first-of-type{
        border-radius: var(--border-radius-xs) var(--border-radius-xs) 0 0;
      }
      &:last-of-type{
        border-radius: 0 0 var(--border-radius-xs) var(--border-radius-xs);
      }
    }
    input{
      width: 100%;
      margin: 0 0 0 15px;
      padding: 8px 10px;
      border: 1px solid #ccc;
      border-radius: var(--border-radius-xs);
    }
    span{
      flex: 2;
      padding: 0 25px 0 0;
      word-break: break-all;
      white-space: nowrap;
      font-size: 13px;
      text-align: center;

      &:last-of-type{
        padding: 0;
      }
    }
    label{
      display: inline-block;
      font-size: 9px;
      font-weight: var(--font-weight-bold);
      text-transform: uppercase;
    }
    small{
      font-size: 11px;
    }
    .ctas{
      margin: 10px 0 0 0;
      padding: 0px 0 0 0;
      /* border-top: 1px dashed #ccc;*/
    }
    svg{
      vertical-align: bottom;
    }
  }

  .modal-form{
    margin: 0px 0 0 0;
  }
  .modal-data{
    margin: 0px 0 0 0;
  }
  .modal-msg{
    margin: 20px 0 10px 0;
    font-size: 13px;
    text-align: center;

    &:empty{
      display: none;
    }
  }
}
#save-modal{
  z-index: 2021;

  .modal-wrapper{
    /*background: var(--color-mytrip);*/
    background: #fff;

    .ctas{
      margin: 20px 0 0 0;
    }
  }
}
#list-modal{
  z-index: 2021;
  .modal-wrapper{
    padding: 20px 10px;
  }
  .modal-wrapper{
    /*background: var(--color-trips);*/
    background: #fff;
    h2{
      margin: 0 0 10px 0;
    }
  }
  .modal-data{
    max-height: 65vh;
    overflow-y: auto;
  }
}



.ctas{
  &[class*='--bottom']{
    position: fixed;
    z-index: 1999;
    bottom: 0px;
    right: 0;
    max-width: 400px;
    width: calc( 100% - 20px );
    margin: 10px;
    padding: 0 0px;
    display: flex;
    justify-content: space-between;

    background: var(--panel-bg-color);
    border-radius: var(--border-radius-s);
    box-shadow: var(--panel-box-shadow);
    border: 2px solid #000;

    button{
      margin: 10px 10px 10px 0;

      &:nth-of-type(1){
        margin: 10px 0 10px 10px;
      }
      &:nth-of-type(2){
        margin: 10px;
      }
      &:nth-of-type(3){
        margin: 10px 10px 10px 0px;
      }
    }
  }
  &[class*='--modal']{
    display: flex;
    width: 100%;
    justify-content: center;
    align-self: center;
    flex-wrap: wrap;

    button{
      margin: 10px 0px 10px 10px;

      &:first-of-type{
        margin: 10px 0px 10px 0px;
      }
    }
  }
  &[class*="--list"]{
    
  }

  
}

#messages{
  position: fixed;
  z-index: 2020;
  bottom: 65px;
  left: 0;
  width: 100%;
  height: fit-content;
  background: rgba(0,0,0,0);
  transition: all .2s ease-in-out;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;

  padding: 10px 0;

  &:empty{
    display: none;
  }

  .message{
    position: relative;
    max-width: calc( 100% - 20px );
    margin: 2px 0 0 0;
    padding: 15px 20px;
    color: #fff;
    
    background: var(--panel-bg-color);
    border-radius: var(--border-radius-s);
    box-shadow: var(--panel-box-shadow);

    &[class*="--full"]{
      width: 100%;
    }

    &[class*="--trip"]{
      width: 100%;
      background: var(--panel-bg-color);
      color: #fff;
    }

    &[class*="--error"]{
      width: 100%;
      background: var(--color-error);
      color: #fff;
    }

    & > *:empty{
      display: none;
    }

    h2{
      margin: 0 0 5px 0;
      font-size: 16px;
    }
    p{
      font-size: 13px;
      line-height: 18px;
    }
    svg{
      vertical-align: text-top;
      polygon,
      polyline{
        fill: white !important;
        stroke: #fff !important;
      }
      path{
        stroke: white;
      }
    }
  }
}

.user-marker{
  filter: hue-rotate(210deg);
}

#loader{
  position: fixed;
  z-index: 9999;
  top: -10px;
  left: 0;
  width: 100%;
  height: var(--loader-height);
  

  &[class*="active"]{
    top: 0;

    .loader-data{
      animation: loading var(--loader-speed) infinite;
    }
  }

  .loader-data{
    position: absolute;
    top: 0;
    height: 100%;
    background: var(--loader-bg-color);
  }
}



/* --- helpers --- */

.hidden{
  display: none !important;
}

::-webkit-scrollbar {
    display: none;
}

@keyframes recording {
  0% {
      filter: brightness(100%);
  }
  50% {
      filter: brightness(40%);
  }
  100% {
      filter: brightness(100%);
  }
}

@keyframes loading {
  0% {
    width: 0;
    left: 0;
    right: auto;
  }
  49% {
      width: 100%;
      left: 0;
      right: auto;
  }
  51% {
      width: 100%;
      left: auto;
      right: 0;
  }
  100% {
      width: 0%;
      left: auto;
      right: 0;
  }
}