/*
 * MIT License
 *
 * Copyright (c) 2021 Thiago Lamenza e Victor Martins
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy of
 * this software and associated documentation files (the "Software"), to deal in
 * the Software without restriction, including without limitation the rights to
 * use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 * the Software, and to permit persons to whom the Software is furnished to do so,
 * subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
 * FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
 * COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
 * IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
 * CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 */

/* Gaveta de ferramentas */
#tray {
  color: white;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0 auto;
  transition: all ease-in-out 150ms;
  width: 65%;
  max-width: 500pt;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: none;
  /*background-color: green;*/
}

/* Puxador */
.toolTrayTab {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #333;
  height: 15pt;
  max-width: 10vw;
  border-top-left-radius: 5pt;
  border-top-right-radius: 5pt;
  /*background-color: red;*/
  pointer-events: auto;
}

.toolTrayCaretUp, .toolTrayCaretDown {
  width: 100%;
  height: 100%;
  text-align: center;
  cursor: pointer;
  color: white;
  text-decoration: none;
}

#tray.open {
  transform: translateY(calc(100% - 15pt));
}

/* Terra de ninguém */
#tray.open > .toolTrayTab > .toolTrayCaretDown {
  display: none;
}
#tray.open > .toolTrayTab > .toolTrayCaretUp {
  display: block;
}

#tray:not(.open) > .toolTrayTab > .toolTrayCaretUp {
  display: none;
}

#tray:not(.open) > .toolTrayTab > .toolTrayCaretDown {
  display: block;
}


.toolTrayBody {
  width: 100%;
  /*height: 70pt;*/
  background-color: rgba(0, 0, 0, 0.65);
  display: flex;
  flex-direction: row;
  align-items: stretch;
  /*align-content: center;*/
  justify-content: space-between;
  column-gap: 20px;
  border-top-right-radius: 8pt;
  padding: 10pt 5pt;
  overflow: hidden;
  font-size: 11pt;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  pointer-events: auto;
  /*background-color: blue;*/
  /*padding-bottom: 0;*/
}

.toolTrayBody > div > input {
  display: none;
  background-color: blue;
}
#leftItems {
  /*background-color: blue;*/
  display: flex;
  flex-direction: row;
}
#rightItems {
  /*background-color: red;*/
  display: flex;
  flex-direction: row;
}
#rightItems .icon {
  margin-left: 4pt;
  margin-right: 4pt;
}
.trayItem > input {
  display: none;
}
.trayItem {
  cursor: default;

  display: flex;
  flex-direction: column;
  align-items: center;

  margin-left: 4pt;
  margin-right: 4pt;
}
.trayItem label {
  cursor: default;
  color: white;
  text-decoration: none;
}

:root {
  --iconSize: 32.5pt;
}
.icon {
  border-radius: 8pt;
  min-width:  var(--iconSize);
  max-width:  var(--iconSize);
  min-height: var(--iconSize);
  max-height: var(--iconSize);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /*background-color: orangered;*/
}

.tool-icon {
  border: 2pt solid white;
}

.trayItem:hover .icon {
  background-color: #FFF4;
}

.trayItem input:checked ~ .icon,
.trayItem:active input ~ .icon {
  background-color: white;
  color: black;
}

.feature-icon {
  border: 2.5pt solid white;
}

.selected {
  border: 2.5pt dashed white;
  border-radius: 10pt;
}

/*.selected > svg {
  fill: #5C87FF;
}*/

.name {
  margin: 0;
  margin-top: 5pt;
  text-align: center;
  /*background-color: red;*/
}

#history-tray {
  display: flex;
  gap: 4pt;
}
.tooltip button {
  border-radius: 4pt;
}
/* .tooltip {*/
/*   position: relative;*/
/*   display: inline-block;*/
/* }*/

/*!* Tooltip text *!*/
/*.tooltip .tooltiptext {*/
/*  visibility: hidden;*/
/*  width: 120px;*/
/*  font-size: 10.5pt;*/
/*  background-color: black;*/
/*  color: #fff;*/
/*  text-align: center;*/
/*  padding: 5px 0;*/
/*  border-radius: 6px;*/

/*  !* Position the tooltip text - see examples below! *!*/
/*  position: absolute;*/
/*  z-index: 1;*/
/*}*/

/*!* Show the tooltip text when you mouse over the tooltip container *!*/
/*.tooltip:hover .tooltiptext {*/
/*  visibility: visible;*/
/*}*/
/*.tooltip .tooltiptext {*/
/*  width: 50pt;*/
/*  bottom: 125%;*/
/*  left: 50%;*/
/*  margin-left: calc(-55pt/2); !* Use half of the width (120/2 = 60), to center the tooltip *!*/
/*}*/
/*.tooltip button {*/
/*  border-radius: 4pt;*/
/*}*/
/*</style>*/