@import './tb-vars'; // All variables should be declared in theme-vars.scss, which is rendered as ./tb-vars.scss on build.

// ------------ Overall
// default style used by page
// =============
body {
  font: 100% $normal-font;
  color: $primary-color;
  cursor: auto;
}

// ------------ Title Bar
// definitions for the title bar and its components
// =============

// constrained - use responsive design to fit into narrow aspect
.constrained {
  .title-bar {
    grid-template-columns: auto 3.2rem auto 2fr auto;
    padding-bottom: 1rem;
    border-bottom-width: 0.15rem;

    .tool-bar {
      width: 5rem;
      flex-wrap: wrap;
      position: absolute;
      top: 4px;
      justify-content: flex-start;
      background-color: unset;

      .tb-toolbutton {
        width: 1.5rem;
        height: 1.5rem;
      }
    }
    .title {
      font-size: 2rem;
    }
  }
}



// Unconstrained
.title-bar {
  display: grid;
  grid-template-columns: auto auto auto 2fr auto;
  grid-template-areas: "back toolbar menu title indicators";
  column-gap: 6px;
  align-items: center;

  height: 3rem;

  border-bottom: 0.2rem solid cornflowerblue;
  padding-bottom: 0.4rem;
  margin-bottom: 0.5rem;
  cursor: none;

  .back-button {
    display:inline-block;
    cursor: pointer;
    font-size: 0.75rem;
    color: blue;
    align-content: center;
    justify-self: left;
    padding-right: 0.25rem;
  }
  .menu-box {
    border: 1px solid darkkhaki;
    margin-left: 6px;
    cursor: pointer;
  }
  .menu-popover {
    background-color: white;
    border: 1px solid black;
  }

  .tool-bar {
    background: aliceblue;
    justify-content: space-evenly;
    flex-direction: row;

    .tb-toolbutton {
      border: 2px solid blue;
      height: 2rem;
      width: 2rem;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .tbIcon {
      width: 30px;
      height: 30px;
      position: absolute;
      left: -15px;
      top: -15px;
    }

    .tbLabel {
      position: absolute;
      left: -15px;
      top: -8px;

    }
  }
  .menuIcon {
    width: 20px;
    height: 20px;
  }

  .indicator-bar {
    background-color: aliceblue;

    .tb-indicator {
      border: 1px solid darkblue;
      border-radius:1rem;
      height: 1rem;
      width: 1rem;
    }

    .indIcon {
      width: 18px;
      height: 19px;
      top: -9.5px;
      position: absolute;
      left: -9.5px;
    }
  }

  .title {
    font-size: 2.5rem;
    color: black;
    padding-left: 0.5rem;
    white-space: nowrap;
  }

}

// ------------ Splash
// styles for our generated splash
// ==================
.splash-back {
  background-image: url('./splash-background.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  width:100%;
}

.splash-content {
  background-image: url('./splash-content.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  width:75%;
  height:50%;
  min-width:100px;
  min-height:100px;
  max-width:100%;
  max-height:100%;
  position: fixed;
  left:50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

// ------------ Basic controls
// styles applied to basic UI components
// =============
.SimpleLabel {
  font-size: 1em;
  white-space: nowrap;
  overflow: hidden;
}
.constrained .SimpleLabel {
  font-size: 0.8em;
}

.TextArea {
  font-size: 1em;
  overflow-y: scroll;
}

.SimpleButton {
   button {
    border-color: black;
    border-width: 2px;
    border-radius: 50px;
    background-color: aliceblue;
    font-size: 0.65em;
    font-weight: bold;
  }
}
.constrained .SimpleButton {
  button {
    font-size: 0.45em;
  }
}

.tool-state-default {
  background-color: yellowgreen;
}
.tool-state-off{
  background-color: darkgray;
}
.tool-state-on {
  background-color: red;
}
.indicator-state-default {
  background-color: yellowgreen;
}
.indicator-state-off{
  background-color: darkgray;
}
.indicator-state-on {
  background-color: red;
}

// ------------ Layout containers
// override definitions to tweak behaviors of layout containers
// =============


// ------------ Platform Styles
// Platform specific redefinitions and adjustments to adapt theme to specific Desktop OS targets
// =============

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, .5);
  box-shadow: 0 0 1px rgba(255, 255, 255, .5);
}

.macos {

}
.windows {

}
.linux {

}