*{font-family:sans-serif}
body{margin:0}
h1{font-size:.95rem}

:root{
  --stickers-per-row: 3;
  --sticker-size: calc(100vw / var(--stickers-per-row));
}

main{color:var(--text-color)}
main.spinner{margin-top:3rem}
main.error,main.empty{margin:1rem}
main.empty{text-align:center}

main.has-content{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  display:grid;
  grid-template-rows:calc(9vw + 2px) min-content auto;
}

main.theme-light{
  --highlight-color:#eee;
  --search-box-color:var(--highlight-color);
  --text-color:black;
  background-color:#fff
}
main.theme-dark{
  --highlight-color:#444;
  --search-box-color:#383e4b;
  --text-color:white;
  background-color:#22262e
}
main.theme-dark .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}
main.theme-black{
  --highlight-color:#222;
  --search-box-color:var(--highlight-color);
  --text-color:white;
  background-color:#000
}
main.theme-black .icon.icon-giphy{background-image:url(../res/giphy-dark.svg)}

div.powered-by-giphy{padding:.5rem}
div.powered-by-giphy>img{width:100%}

.icon{
  width:100%;
  height:100%;
  background-color:var(--text-color);
  mask-size:contain;
  -webkit-mask-size:contain;
  mask-image:var(--icon-image);
  -webkit-mask-image:var(--icon-image)
}
.icon.icon-settings{--icon-image:url(../res/settings.svg)}
.icon.icon-recent{--icon-image:url(../res/recent.svg)}
.icon.icon.icon-search{--icon-image:url(../res/search.svg)}
.icon.icon.icon-giphy{
  background:center/contain no-repeat url(../res/giphy-light.svg);
  mask:unset
}

nav{
  display:flex;
  overflow-x:auto
}
nav>a{
  border-bottom:2px solid rgba(0,0,0,0)
}
nav>a.visible{
  border-bottom-color:green
}
nav>a>div.sticker{
  width:9vw;
  height:9vw
}

div.pack-list,nav{scrollbar-width:none}
div.pack-list::-webkit-scrollbar,nav::-webkit-scrollbar{display:none}
div.pack-list{overflow-y:auto}

div.pack-list.ios-safari-hack{
  position:fixed;
  top:calc(calc(9vw + 2px) + calc(2 * 0.45rem + 2 * 0.35rem + 1rem));
  bottom:0;
  left:0;
  right:0;
  -webkit-overflow-scrolling:touch
}

div.search-empty{
  margin:.8rem;
  text-align:center
}

section.stickerpack{
  margin-top:.35rem
}
section.stickerpack>div.sticker-list{
  display:flex;
  flex-wrap:wrap
}
section.stickerpack>h1{
  margin:0 0 0 .5rem
}
section.stickerpack#pack-giphy{
  display:flex;
  justify-content:space-between;
  flex-direction:column;
  min-height:100%
}

div.sticker{
  display:flex;
  padding:2px;
  cursor:pointer;
  position:relative;
  width:var(--sticker-size);
  height:var(--sticker-size);
  box-sizing:border-box
}
div.sticker:hover{
  background-color:var(--highlight-color)
}
div.sticker>img{
  display:none;
  width:100%;
  object-fit:contain
}
div.sticker>img.visible{
  display:initial
}
div.sticker>.icon{
  width:70%;
  height:70%;
  margin:15%
}

div.search-box{
  position:relative;
  display:flex
}
div.search-box>input[type=text]{
  flex-grow:1;
  background-color:var(--search-box-color);
  outline:none;
  border:none;
  border-radius:.25rem;
  height:.95rem;
  padding:.45rem;
  padding-right:calc(1rem + 0.45rem);
  margin:.35rem;
  font-size:.95rem;
  color:var(--text-color)
}
div.search-box>span.icon{
  display:flex;
  position:absolute;
  top:calc(50% - .95rem/2);
  right:.8rem;
  width:.95rem;
  height:.95rem;
  box-sizing:border-box
}

div.settings-list{
  display:flex;
  flex-direction:column
}
div.settings-list>*{margin:.35rem}
div.settings-list button{
  padding:.45rem;
  border-radius:.25rem
}
div.settings-list input{width:100%}