/* ! Change in Kuechenlotse.Main/wwwroot */
/* Tiles  */

.tiles {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
}

.tile-break {
  display: flex;
  width: 100%;
}

.tile-break > summary {
  color: var(--primary);
}

.tile-break:has(.tile-wide.active) > summary {
  color: var(--accent);
}

.tile,
.tile-wide {
  border-radius: 15px;
  text-align: center;
  width: 80vw;
  min-height: 14vw;
  height: auto;
  border-style: solid;
  border-width: 0px;
  border-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 1vw;
  padding: 1vw;
  font-size: 200%;
  background-color: var(--transparent);
  box-shadow: 5px 5px 5px black;
  word-wrap: break-word;
  hyphens: auto;
}

.tile.subType,
.tile-wide.subType {
  background-color: transparent;
}

.tile.active,
.tile-wide.active {
  background-color: var(--transparent-special);
}

.tile.more,
.tile-wide.more {
  display: none;
}

.tile:hover,
.tile:focus,
.tile-wide:hover,
.tile-wide:focus {
  background-color: var(--transparent-active);
}

.tile:hover.active,
.tile:focus.active,
.tile-wide:hover.active,
.tile-wide:focus.active {
  border-color: var(--transparent-special);
  border-width: 3px;
}

@media only screen and (min-width: 768px) {
  .tile {
    width: 20vw;
    height: 20vw;
    font-size: 140%;
  }

  .tile-wide {
    width: 20vw;
    height: 10vw;
    font-size: 150%;
  }
}

@media only screen and (min-width: 1440px) {
  .tile {
    width: 18vw;
    height: 18vw;
    font-size: 220%;
  }

  .tile-wide {
    width: 18vw;
    height: 6vw;
    font-size: 300%;
  }

}


/* selection tiles */

.active-selector {
  border-color: var(--transparent-special);
  border-width: 5px;
  border-radius: 25px;
}

.selected-selector {
  background-color: var(--secondary);
}



/* Animation */

.tile {
  transform-style: preserve-3d;
  transition: transform 0.5s ease-out, background 0.5s ease-out;
  z-index: 5;

  text-shadow: -1px -1px 0px black;
  /* TODO: animation ? */
  /* background: radial-gradient(circle at 50% 50%, 
  var(--primary) 1%,
  var(--accent) 5%, 
  var(--transparent-special) 30%, 
  var(--transparent-active),
  var(--transparent-active),
  var(--transparent-active)
  ); */
}


.tile-shader:hover {
  box-shadow: var(--shadowX) var(--shadowY) var(--shadow) black;
  transform: rotate3d(var(--x),
      var(--y),
      0,
      var(--deg));

  /* TODO: too much? */
  /* background: radial-gradient(circle at var(--highlightX) var(--highlightY), 
  var(--primary) 1%,
  var(--accent) 5%, 
  var(--transparent-special) 30%, 
  var(--transparent-active),
  var(--transparent-active),
  var(--transparent-active)
  ); */

  background: radial-gradient(circle at var(--highlightX) var(--highlightY),
      var(--background),
      var(--transparent-active));
}

/* design */

details > summary > div {
  background-color: var(--transparent);
  text-align: center;
  display: inline-block;
}

details > summary:focus{
  outline: none;
  border-radius: 0px;
}

details > summary:focus > div{
  outline: 2px solid var(--accent);
  border-radius: 5px;
}