/* dashboard-icons.css
   Dashboard live tiles: centered icon with the name in the bottom-left corner.
*/

/* ---- dashboard live tiles: centered icon, name bottom-left ---- */
.dash-icon{display:grid;place-items:center;color:#0f1a17;}
.dash-icon svg{
  width:clamp(38px,3.8vw,60px);
  height:auto;
  display:block;
  opacity:.86;
  filter:drop-shadow(0 2px 0 rgba(255,255,255,.7));
  transition:transform .3s cubic-bezier(.3,1.5,.5,1);
}
.dash-icon-lg svg{width:clamp(58px,5.6vw,88px);}
.metro-page:not(.expanded-mode) button.metro-tile:not(:disabled):hover .dash-icon svg{transform:scale(1.1) rotate(-5deg);}
.metro-page:not(.expanded-mode) .dash-face{
  position:absolute;
  inset:0;
  display:grid;
  grid-template-rows:1fr auto;
  padding:14px 16px 13px;
  pointer-events:none;
}
.metro-page:not(.expanded-mode) .dash-face .dash-icon{place-self:center;padding-top:6px;}
.metro-page:not(.expanded-mode) .metro-tile .dash-face .dash-name{
  justify-self:start;
  width:auto!important;
  max-width:100%!important;
  margin:0;
  padding:0!important;
  font-size:clamp(14px,1.15vw,18px)!important;
  font-weight:700;
  line-height:1.1;
  text-align:left!important;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.metro-page:not(.expanded-mode) .metro-tile.tile-wide .dash-face .dash-name{font-size:clamp(16px,1.35vw,21px)!important;}
.metro-page:not(.expanded-mode) .module-simple .tile-time{top:12px;right:12px;bottom:auto;}
.metro-page:not(.expanded-mode) .module-simple.tile-lock::after{left:auto;right:12px;top:12px;bottom:auto;}
.metro-page:not(.expanded-mode) .tile-large .dash-icon-lg{flex:1;min-height:0;}
.metro-page:not(.expanded-mode) .tile-large .tile-note{margin-top:0;}
@media (max-width:620px){
  .dash-icon svg{width:clamp(22px,7vw,30px);}
  .dash-icon-lg svg{width:clamp(40px,12vw,56px);}
  .metro-page:not(.expanded-mode) .dash-face{padding:8px 9px 7px;}
  .metro-page:not(.expanded-mode) .dash-face .dash-icon{padding-top:4px;}
  .metro-page:not(.expanded-mode) .metro-tile:not(.tile-wide):not(.tile-large):not(.tile-mega) .tile-time{display:none;}
  .metro-page:not(.expanded-mode) .module-simple .tile-time{top:7px;right:7px;padding:2px 7px;font-size:10px;}
  .metro-page:not(.expanded-mode) .metro-tile.tile-wide .dash-face .dash-name{font-size:clamp(13px,4vw,16px)!important;}
}