/* Blog Sort Toggle - archive style */

body.blog .ast-container form.photo-sort-toggle{
  margin-left: auto !important;
  margin-right: auto !important;
  width: 100% !important;
}

body.blog .photo-sort-toggle{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: .45rem;
  margin: 0 auto 1.6rem auto;
  width: 100%;
  text-align: center;
  font-family: var(--pa-font-body);
}

body.blog .photo-sort-toggle .toggle-label{
  display: none;
}

body.blog .photo-sort-toggle .toggle-group{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.06);
  backdrop-filter: blur(4px);
  overflow: hidden;
  transition: border-color .14s ease, background-color .14s ease;
}

body.blog .photo-sort-toggle .toggle-option{
  appearance: none;
  border: none;
  padding: .42rem 1.15rem;
  background: transparent;
  cursor: pointer;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.1;
  text-transform: uppercase;
  color: rgba(255,255,255,.72);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease;
}

body.blog .photo-sort-toggle .toggle-option:hover{
  background: rgba(255,255,255,.10);
  color: rgba(255,255,255,.92);
}

body.blog .photo-sort-toggle .toggle-option.active{
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.25);
}

body.blog .photo-sort-toggle .toggle-option:focus,
body.blog .photo-sort-toggle .toggle-option:visited{
  outline: none;
  box-shadow: none;
  text-decoration: none;
}

@media (max-width:768px){
  body.blog .photo-sort-toggle{
    margin: 0 auto 1.3rem auto;
  }

  body.blog .photo-sort-toggle .toggle-option{
    font-size: .72rem;
    padding: .36rem .95rem;
  }
}