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

@screen-sm:          576px;
@screen-md:          768px;
@screen-lg:          992px;
@screen-l:          1200px;
@screen-xl:         1400px;

@screen-xs-max:     (@screen-sm - 1);
@screen-sm-min:     @screen-sm;
@screen-sm-max:     (@screen-md - 1);
@screen-md-min:     @screen-md;
@screen-md-max:     (@screen-lg - 1);
@screen-lg-min:     @screen-lg;
@screen-lg-max:     (@screen-l - 1);
@screen-l-min:      @screen-l;
@screen-l-max:      (@screen-xl - 1);
@screen-xl-min:     @screen-xl;

:root {
  
  --color-black: #111;
  --color-darker: #222;
  --color-dark: #444;
  --color-dim: #666;
  --color-base: #ddd;
  --color-base-darken: #bbb;
  --color-hit: #fff;
  --color-link: rgb(133, 179, 244);
  --color-down: #d66;
  --color-semidown: #cce;
  --color-semidown-dark: #116;
  
  --txt-size: 16px;
  --fade-duration: 3s;
  --radius: 2px;
  --shadow-light: 2px 1px 2px rgba(0,0,0,.4);
  --shadow: 2px 2px 2px rgba(0,0,0,.6);
  // --shadow-light: none;
  // --shadow: none;
}

* {
  box-sizing: border-box;
}

*:focus {
  border: 0;
  outline: 0;
  box-shadow: none;
}

.desktop-only {
  display: none;
  @media(min-width: @screen-lg-min){
    display: inline-block;
  }
}

.no-select {
  user-select: none;
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
}

.mobile-only {
  display: none;
  @media(max-width: @screen-md-max){
    display: inline-block;
    &.br {
      display: block;
    }
    br:before {
      content: '';
      clear: both;
    }
  }
}

.clear {
  clear: both;
}

.mobile-align {
  &-left {
    @media(max-width: @screen-md-max){
      float: left;
    }
  }
  &-right {
    @media(max-width: @screen-md-max){
      float: right;
    }
  }
}

body {
  font-family: Arial;
  background: var(--color-black);
  color: var(--color-base);
  font-size: var(--txt-size);
  margin: 0;
  padding: 20px;

  @media(max-width: @screen-md-max){
    padding: 10px;
  }
}

.hidden {
  display: none;
}

div.hr {
  height: 1px;
  border: 0;
  background: var(--color-dim);
  position: relative;
  top: -10px;
  margin-bottom: 20px;
  display: block;
}

i.fa, i.fas {
  font-size: 12px;
  margin-left: 1px;
  opacity: .5;
  display: none;
}

button {
  color: var(--color-link);
  &.textual {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--color-link);
    outline: 0;
    font-size: var(--txt-size);
    margin: 0;
    padding: 0;
  }
  &.disabled, &.disabled:hover {
    opacity: .5;
    background: var(--color-base) !important;
    color: var(--color-dim);
  }
}

input[type="checkbox"],
label,
button,
.kb {
  cursor: pointer;
}

input[type="checkbox"] {
  margin: 0 10px 20px 0;
}

.site_loader {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: transparent;
  .bar {
    position: relative;
    width: 0;
    height: 100%;
    background: var(--color-dark);
  }
}

.tpl {
  display: none;
}

.warn {
  margin: 20px;
  color: #800;
}

input[type="text"],
select {
  display: block;
  margin-bottom: 20px;
  padding: 10px;
  // width: 100%;
  border: 0;
  font-size: 16px;
  background: var(--color-base);
}

select {
  font-size: var(--txt-size);
  width: auto;
  display: inline-block;
  padding: 5px;

  @media(max-width: @screen-md-max){
    width: 100%;
  }
}


.inputs {
  display: flex;
  align-items: baseline;
  position: relative;

  @media(max-width: @screen-md-max){
    display: block;
  }

  * {
    z-index: 2;
  }
  input, .tools {
    width: auto;
    @media(max-width: @screen-md-max){
      width: 100%;
    }
  }
  input {
    flex-grow: 1;
    flex-shrink: 1;
    margin-right: 5px;
    position: relative;
    z-index: 2;
  }
  .info {
    .no-select;
    width: 1px;
    max-width: 350px;
    text-align: right;
    transition: .1s .1s all ease-in-out;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    &.active {
      flex-grow: 1;
      flex-basis: content;
      padding-right: 20px;
      width: auto;
      opacity: 1;
    }
  }
  .tools {
    .no-select;
    position: relative;
    z-index: 4;

    // @media(max-width: @screen-md-max){
    //   // display: block;
    //   display: none;
    //   width: 100%;
    // }


    button {
      margin: 0 0 0 10px;
      padding: 8px 10px;
      font-size: 20px;
      border: 0;
      border-radius: 0;
      background: var(--color-base);
      color: var(--color-dim);
      position: relative;
      top: 2px;
      &:hover {
        background: var(--color-base-darken);
      }
    }
    
    #open_session {
      position: absolute;
      right: -10px;
      margin-top: 2px;
      width: auto;
      min-width: 250px;
      // padding: 10px;
      margin-right: 10px;
      background: var(--color-dark);
      box-shadow: var(--shadow);
      border-radius: var(--radius);
      div {
        padding: 5px 10px;
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        cursor: pointer;
        
        &:first-child {
          padding-top: 10px;
        }
        &:last-child {
          padding-bottom: 10px;
        }
        &:hover {
          background: var(--color-dim);
        }
        .icon {
          // position: relative;
          // bottom: -5px;
          &:hover {
            color: #633;
          }
        }
      }
    }
  }
}


.toolbar {
  .no-select;
  margin-bottom: 20px;
  input.inline {
    width: 40px;
    display: inline;
    padding: 2px;
    text-align: center;
    margin-bottom: 0;
  }
}

.kbs {
  opacity: 0;
  transition: opacity .5s ease-in-out;
  // width: 100%;
  // display: block;
  &.ready {
    opacity: 1;
  }
  &.resizing {
    .kb {
      background: var(--color-darker);
      .key {
        opacity: 0;
      } 
      .tools {
        display: none;
      }
    }
    // opacity: 0;
  }
}

.kb {
  .no-select;
  font-family: 'Martian Mono', monospace;
  font-size: 10px;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  padding: 0;
  border: 0;
  white-space: nowrap;
  margin: 0 20px 20px 0;
  // min-width: 50%;
  // width: 100%;
  &:hover {
    .tools div {
      opacity: 1;
    }
    .key.down > .details {
      opacity: 1;
    }
  }
  .tools {
    position: absolute;
    top: 0;
    right: 5px;
    z-index: 3;
    // opacity: 0;
    transition: .15s opacity ease-in-out;
    font-size: 10px;
    text-transform: uppercase;
    width: 100%;
    padding: 5px 5px 0 0;
    text-align: right;

    div {
      padding: 5px;
      background: var(--color-dark);
      display: inline-block;
      border-radius: var(--radius);
      opacity: 0;
      border-radius: 5px;
      box-shadow: 5px 5px 3px rgba(0,0,0,.4);
      @media(max-width: @screen-md-max){
        opacity: 1;
        top: 0;
        right: 0;
      }
      &.active {
        opacity: 1;
      }

    }


    button {
      background: #666;
      margin: 0;
      padding: 3px 7px;
      border: 0;
      color: var(--color-base);
      // box-shadow: var(--shadow-light);
      i.fas {
        opacity: 1;
        display: block;

        @media(max-width: @screen-md-max){
          font-size: 32px;
        }
      }
      &.down {
        border-top-left-radius: var(--radius);
        border-bottom-left-radius: var(--radius);
      }
      &.up {
        border-top-right-radius: var(--radius);
        border-bottom-right-radius: var(--radius);
        border-left: 1px solid #999;
      }
      &:hover {
        // background: #888;
        background: var(--color-link);
        color: var(--color-dim);
      }
      &.active, &.active:hover {
        // background: #866;
        background: var(--color-link);
        color: var(--color-dark);
      }
    }
  }
  .warn {
    position: absolute;
    bottom: -40px;
    left: 0;
    background: rgba(255,255,255,.5);
  }
  .key {
    width: 20px;
    height: 100px;
    outline: 1px solid rgba(0,0,0,1);
    display: inline-block;
    position: relative;
    &.white {
      background: #fff;
      position: relative;
      overflow: visible;
      border-radius: 0;
      // border-bottom-left-radius: 1px;
      // border-bottom-right-radius: 1px;
    }
    &.black {
      
      outline: 1px solid #000;
      width: 12px;
      height: 55px;
      background: #000;
      position: absolute;
      left: 13px;
      z-index: 2;
      // box-shadow: 2px -1px 2px rgba(0,0,0,.5), 0 2px 2px rgba(0,0,0,.5);
      border-radius: 0 !important;
      border-bottom-left-radius: var(--radius) !important;
      border-bottom-right-radius: var(--radius) !important;
      > .details {
        font-size: 5px;
        color: var(--color-base);
      }
    }
    &.semi-down {
      &.white {
        background: var(--color-semidown);
      }
      &.black {
        background: var(--color-semidown-dark);
      }
    }
    &.down {
      background: var(--color-down) !important;
      &.white {
        // box-shadow: inset 2px 0 1px #000;
      }
      &.black {
        box-shadow: none;
      }
      > .details {
        opacity: 1;
        display: inline-block;
        color: var(--color-black);
        font-size: 8px;
      }
    }
    &:first-child {
      border-top-left-radius: 2px;
      border-bottom-left-radius: 2px;
    }
    &:last-child {
      border-top-right-radius: 2px;
      border-bottom-right-radius: 2px;
    }
    > .details {
      opacity: 0;
      // opacity: 1;
      font-size: 6px;
      position: absolute;
      bottom: 5px;
      left: 0;
      right: 0;
      text-align: center;
      color: var(--color-dark);
    }
  }
  &.playing .clickable {
    box-shadow: 0 0 10px 5px var(--color-link);
  }
  &.fadeout .clickable {
    box-shadow: 0 0 0 0 var(--color-link);
    transition: box-shadow var(--fade-duration);
  }
}

.autocomplete-helper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  .pre {
    position: relative;
    opacity: 0;
    display: inline;
    padding: 10px 5px;;
    font-size: 16px;
  }
  #faux {
    padding: 0;
    position: relative;
    top: 21px;
    left: -5px;
    opacity: 0;
    width: 240px;
    display: inline;
  }
}

.ui-autocomplete {
  list-style-type: none;
  margin: 0;
  padding: 0;
  background: var(--color-base);
  color: var(--color-dim);
  // 
  width: 240px;
  height: 300px;
  overflow-y: auto;
  z-index: 5;
  li {
    padding: 5px 10px;
    cursor: pointer;
    &:hover {
      color: var(--color-black);
    }
    &:first-child {
      padding-top: 0;
    }
  }
}

.ui-helper-hidden-accessible {
  display: none;
}

#c2m, #ms {
  display: none;
  position: fixed;
  width: 100%;
  left: 10px;
  bottom: -600px;
  padding: 20px;
  background: var(--color-dark);
  color: var(--color-base);
  z-index: 7;
  &.visible {
    display: block;
    bottom: 0;
  }
}

#ms {
  &.visible {
    display: block;
    bottom: 60px;
  }
}

textarea.python {
  display: none;
  white-space: pre-line;
  position: fixed;
  width: 400px;
  height: 400px;
  bottom: -600px;
  left: 0;
  z-index: 7;
  padding: 20px;
  background: var(--color-dark);
  color: var(--color-base);
  &.visible {
    display: block;
    bottom: 0;
  }
}