@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root{
  --clr-dark: #111;
  --clr-mid: #222;
  --clr-lite: #333;
  --clr-button: #555;
  --clr-button-border: #444;
  --clr-white: #d9d9d9;
  --clr-on: #C10940;
  --clr-on-hover: #1b5e9c;
  --clr-delete: #C10940;
  --clr-close: #D28325;
  --clr-available: #257FD2;

  --gap: 5px;
  --border-radius: 5px;
  --padding: 1rem;

  --border: 1px solid var(--clr-button-border);
}

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

body{
  font-family: 'Poppins', sans-serif;
  background-color: var(--clr-dark);
  color: var(--clr-white);
  height: 100vh;
  display: grid;
  grid-template-columns: 50px minmax(505px, 5fr) minmax(170px, 1.5fr);
  grid-template-rows: minmax(60px, 10%) 80% minmax(40px, 10%);
  grid-template-areas: 
    "header header header"
    "tools main assets"
    "footer footer footer";
}

header, footer{
  background-color: var(--clr-dark);
}

header{
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  padding: calc(var(--padding)/2);
  border-bottom: 1px solid var(--clr-button-border);
}

footer{
  grid-area: footer;
  text-align: right;
  font-size: 0.8rem;
  padding: var(--padding);
  border-top: var(--border);
}

aside{
  background-color: var(--clr-lite);
}

h1, h2, h3, h4{
  font-weight: 300;
}

h2{
  font-size: 1.2em;
}

h3{
  font-size: 1em;
}
h4{
  font-size: 0.8em;
}

.main-canvas{
    border: var(--border);
    border-radius: var(--border-radius);
    background-color: var(--clr-white);
    width: 80%;
    aspect-ratio: 16/9;
}

.whiteboard-canvas{
  position: absolute;
  z-index: 100;
  width: 80%;
  aspect-ratio: 16/9;
  border-radius: var(--border-radius);
}

.fullscreen-container{
  display: flex;
  align-items: end;
  justify-content: center;
  gap: var(--gap);
}

.toolbar{
  position: relative;
  grid-area: tools;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
  border-right: var(--border);
}

.tools-container{
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap);
}

.main-container{
  position: relative;
  grid-area: main;
  display: grid;
  place-items: center;
  grid-template-rows: 5fr 1fr;
  background-color: var(--clr-mid);
}

.whiteboard-tools-wrapper{
  width: 100%;
}

.whiteboard-tools-container, .textbox-container{
  --scale: 0;
  width: 100%;
  padding: 5px 0px 0px 7px;
  display: flex;
  justify-content: flex-start;
  gap: 5px;
  transform: scaleX(var(--scale));
  transform-origin: left center;
  transition: transform 300ms ease;
}

.whiteboard-tools-container.active{
  --scale: 1;
}

.textbox-container{
  padding-left: 50px;
  transform-origin: bottom left;

  input{
    height: 25px;
    width: 200px;
    border-radius: var(--border-radius);
    border: var(--border);
    background-color: var(--clr-lite);
    color: var(--clr-white);
    padding: 0 5px;
  }

  input:focus{
    outline: 1px solid var(--clr-available);
  }

  .text-place-btn{
    height: 25px;
    width: 75px;
    font-weight: 700;
    text-align: center;
    background-color: var(--clr-on);
  }
}

.textbox-container.active{
  --scale: 1;
}


.assets-bar{
  grid-area: assets;
  padding: 1rem;
  border-left: var(--border);
  overflow-y: scroll;
  overflow-x: auto;
  scrollbar-color: var(--clr-mid) var(--clr-dark);
  scrollbar-width: thin;
}

.assets-title{
  display: flex;
  justify-content: space-between;
}

.captures-container{
  margin-top: 1rem;
  border-top: var(--border);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

.ad-container{
  width: 100%;
}

.media-container{
  margin-top: 5px;
  padding: 5px;
  border-radius: var(--border-radius);
  border: var(--border);
}

.captures-container .media-container img {
  width: 100%;
}

.captures-container .media-container video{
 width: 100%;
 border-radius: var(--border-radius);
}

.media-container a {
  display: block;
  width: 100%;
  padding: 5px;
}

.btn{
  position: relative;
  display: grid;
  place-items: center; 
  background-color: var(--clr-available);
  color: var(--clr-white);
  border: var(--border);
  aspect-ratio: 1;
  width: 40px;
  border-radius: var(--border-radius);
  z-index: 100;
}

.btn:hover{
  background-color: var(--clr-lite);
  cursor: pointer;
}

.tooltip-right,
.tooltip-left,
.tooltip-top{
  position: relative;
}

.tooltip-right::after, 
.tooltip-top::after, 
.tooltip-left::after, 
.tooltip-bottom::after{
  position: absolute;
  z-index: 101;
  width: max-content;
  padding: 0.5em;
  font-size: 0.75rem;
  background-color: var(--clr-mid);
  border-radius: var(--border-radius);
  --scale: 0;
  transform: scale(var(--scale));
  transition: transform 300ms 500ms ease;
}

.tooltip-right::after{
  left: 50px;
  transform-origin: left center;
}

.tooltip-left::after{
  right: 50px;
  transform-origin: right center;
}

.tooltip-top::after{
  top: -40px;
  left: 0;
  transform-origin: bottom left;
}

.tooltip-bottom::after{
  bottom: -40px;
  right: 0;
  transform-origin: top right;
}

.tooltip-right:hover::after, 
.tooltip-top:hover::after, 
.tooltip-left:hover::after, 
.tooltip-bottom:hover::after{
  --scale: 1;
}

.btn:disabled{
  background-color: var(--clr-lite);
}

.btn.active{
  background-color: var(--clr-on) !important;
  border-color: var(--clr-white);
}

.btn.active:hover{
  background-color: var(--clr-on-hover);
}

.text-btn{
  text-decoration: none;
  text-align: center;
  color: var(--clr-white);
  background-color: var(--clr-available);
  border-radius: var(--border-radius);
  border: 1px solid var(--clr-white);
  transition: all 300ms;
}

.text-btn:hover{
  color: var(--clr-available);
  background-color: var(--clr-white);
  border-color: var(--clr-available);
}

.color-btn{
  border-radius: var(--border-radius);
  background-color: var(--clr-mid);
  color: var(--clr-white);
  height: 40px;
  padding: 3px;
}

.select-btn{
  background-color: var(--clr-mid);
  color: var(--clr-white);
  border-radius: 3px;
  border: var(--border);
  height: 40px;
  padding: 5px;
  text-align: center;
  font-size: 1.2rem;
}

.select-btn:hover{
  background-color: var(--clr-lite);
}

.select-btn:focus{
  outline: none;
}

.whiteboard-tools-container .btn{
  background-color: var(--clr-mid);
}

.whiteboard-tools-container .btn:hover{
    background-color: var(--clr-lite);
}

.whiteboard-tools-container label{
  margin-left: 5px;
}


.fullscreen-btn::before{
  content: url('../images/fullscreen.svg');
}

.fullscreen-btn::after{
  content: 'Enter Fullscreen';
}

.get-camera-btn::before{
  content: url('../images/camera-on.svg');
}
.get-camera-btn::after{
  content: 'Toggle on Webcam';
}

.invert-camera-btn::before{
  content: url('../images/invert-camera.svg');
}

.invert-camera-btn::after{
  content: 'Invert Webcam for Text';
}

.get-display-btn::before{
  content: url('../images/display.svg');
}

.get-display-btn::after{
  content: 'Toggle Display Share';
}

.make-whiteboard-btn::before{
  content: url('../images/whiteboard-icon.svg');
}

.make-whiteboard-btn::after{
  content: 'Set Background to Whiteboard';
}

.take-photo-btn::before{
  content: url('../images/camera-icon.svg');
}

.take-photo-btn::after{
  content: 'Take Screenshot';
}

.get-mic-btn::before{
  content: url('../images/mic-fill.svg');
}

.get-mic-btn::after{
  content: 'Toggle on Microphone';
}

.record-video-btn::before{
  content: url('../images/record.svg');
}

.record-video-btn::after{
  content: 'Toggle on Video Recording';
}

.clear-captures-btn::before{
  content: url('../images/remove-photo.svg');
} 

.clear-captures-btn{
  z-index: 99;
}

.clear-captures-btn::after{
  content: 'Remove Images and Videos';
}

.whiteboard-toggle-btn {
  position: absolute;
  bottom: 5px;
}

.whiteboard-toggle-btn::before{
  content: url('../images/pencil-sq-icon.svg');
}

.whiteboard-toggle-btn::after{
  content: "Show Whiteboarding Tools";
}

.pencil-btn::before{
  content: url('../images/pencil-icon.svg');
}

.pencil-btn::after{
  content: 'Pencil Tool';
} 

.text-tool-btn::before{
  content: url('../images/text-icon.svg');
}

.text-tool-btn::after{
  content: 'Text Tool';
}

.line-btn::before{
  content: url('../images/line-tool.svg');
}

.line-btn::after{
  content: 'Line Tool';
}

.square-btn::before{
  content: url('../images/square-icon.svg');
}

.square-btn::after{
  content: 'Square Shape Tool';
}

.ellipse-btn::before{
  content: url('../images/circle-icon.svg');
}

.ellipse-btn::after{
  content: 'Ellipse Tool';
}

.color-btn::after{
  content: 'Color Picker';
}

.color-style-wrapper::after{
  content: 'Shape Style'
}

.size-select-wrapper::after{
  content: 'Size Selector';
}

.clear-whiteboard-btn::before{
  content: url('../images/x-clear-icon.svg');
}

.clear-whiteboard-btn::after{
  content: 'Clear Whiteboard';
}

/* ==== Helpers ==== */

.align-right{
  align-self: center;
  justify-self: end;
}
.align-center{
  align-self: center;
  justify-self: center;
}
.align-left{
  align-self: center;
  justify-self: start;
}

.close:enabled{
  background-color: var(--clr-close);
}

.available:enabled{
  background-color: var(--clr-available);
}

.delete:enabled{
  background-color: var(--clr-delete);
}