@import url("./modern-normalize.css");
@import url("./extra/microblog.css");

@font-face {
  font-family: "Volkorn";
  src: url("/fonts/Volkorn/Vollkorn-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("/fonts/Atkinson-Hyperlegible/Atkinson-Hyperlegible-Regular-102.woff")
    format("woff");
  font-weight: normal;
}

:root,
::backdrop {
  --font-serif: Volkorn, serif;
  --font-sans: "Atkinson Hyperlegible",sans-serif;
  --font-mono: monospace;
  --font-display: Volkorn, display;
  --radius: 5px;

  /* font fluid scale */
  --step--2: clamp(0.7813rem, 0.7775rem + 0.0188vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.925rem + 0.0625vw, 1rem);
  --step-0: clamp(1.125rem, 1.1rem + 0.125vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.3075rem + 0.2125vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.5534rem + 0.3331vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.8445rem + 0.4974vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.189rem + 0.719vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.5963rem + 1.0153vw, 3.8147rem);

  /* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1920,20,1.25,5,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l&g=s,l,xl,12 */

  --space-3xs: clamp(0.25rem, 0.2375rem + 0.0625vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.475rem + 0.125vw, 0.625rem);
  --space-xs: clamp(0.75rem, 0.7125rem + 0.1875vw, 0.9375rem);
  --space-s: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
  --space-m: clamp(1.5rem, 1.425rem + 0.375vw, 1.875rem);
  --space-l: clamp(2rem, 1.9rem + 0.5vw, 2.5rem);
  --space-xl: clamp(3rem, 2.85rem + 0.75vw, 3.75rem);
  --space-2xl: clamp(4rem, 3.8rem + 1vw, 5rem);
  --space-3xl: clamp(6rem, 5.7rem + 1.5vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.25rem, 0.175rem + 0.375vw, 0.625rem);
  --space-2xs-xs: clamp(0.5rem, 0.4125rem + 0.4375vw, 0.9375rem);
  --space-xs-s: clamp(0.75rem, 0.65rem + 0.5vw, 1.25rem);
  --space-s-m: clamp(1rem, 0.825rem + 0.875vw, 1.875rem);
  --space-m-l: clamp(1.5rem, 1.3rem + 1vw, 2.5rem);
  --space-l-xl: clamp(2rem, 1.65rem + 1.75vw, 3.75rem);
  --space-xl-2xl: clamp(3rem, 2.6rem + 2vw, 5rem);
  --space-2xl-3xl: clamp(4rem, 3.3rem + 3.5vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);

  /* GENERAL COLOUR RULES

  https://encycolorpedia.fr/ae8964

  Base color is sepia: #ae8964
  Complementary color is #51769b → 5795bb

  */

  color-scheme: light;

  /* Base */
  --color-crust: oklch(0.950 0.016 66.2);
  --color-mantle: #f7e6d4;
  --color-surface: #efd8c3;

  /* Text */
  --color-text-primary: oklch(0.256 0.027 66.2);
  --color-text-secondary: oklch(0.395 0.041 66.2);
  --color-text-tertiary: oklch(0.534 0.056 66.2);

  /* Accent */
  --color-accent: #d98026;
  --color-accent-contrast: var(--color-crust);

  /* Alt Accent (blue-ish) */
  --color-accent-alt: oklch(0.321 0.080 251.8);
  --color-accent-alt-transparent: rgba(38, 128, 217, 0.35);

  /* Warm Accent Colors (harmonious with sepia) */
  --color-accent-flame: #d98026; /* Copper/Burnt Orange for buttons, highlights */
  --color-accent-burgundy: #7a2f2f; /* Deep wine accent for richness/depth */

  /* High-Contrast Cool Colors (complementary) */
  --color-accent-dustyblue: #3a6ea5; /* Dusty blue for links, info, or alt accent */
  --color-accent-teal: #2e7366; /* Teal for subtle contrast and balance */
}

/* @media (prefers-color-scheme: dark) { */
  /* :root, */
  /* ::backdrop { */
    /* color-scheme: dark; */

    /* Base */
    /* --color-crust: oklch(0.950 0.016 66.2); */
    /* --color-mantle: #f7e6d4; */
    /* --color-surface: #efd8c3; */

    /* --text: #f7e6d4; /* Light cream for good contrast */ */
    /* --text-light: #d6b89a; /* Softer cream */ */
    /* --text-lighter: #c4996e; /* Softer cream */ */
    /* --color-accent: #d98026; /* Keep main orange accent */ */
    /* --alt-accent: oklch( */
      /* 0.502 */
      /* 0.125 */
      /* 251.8 */
    /* ); /* Brighter blue accent for dark mode */ */
    /* --alt-accent-transparency: rgba(74, 160, 255, 0.35); */
    /* --color-accent-bg: #f7e6d4; /* Darker warm background for accent areas */ */
  /* } */

  /* img, */
  /* video { */
  /* opacity: 0.8; */
  /* } */
/* } */

html {
  scroll-behavior: smooth;
  overscroll-behavior: none;
  min-height: 100%;
}

body {
  background-color: var(--color-crust);
  line-height: 1.5;
  font-family: var(--font-sans);
  color: var(--color-text-primary);
  font-size: var(--step-0);
  overscroll-behavior: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  overflow-wrap: break-word;
  /* font-size: 1.3ch; */
}

h1 {
  /* font-size: var(--step-5); */
  margin-top: 0;
}

/* h2 { */
/* font-size: var(--step-4); */
/* } */

/* h3 { */
/* font-size: var(--step-3); */
/* } */

/* h4 { */
/* font-size: var(--step-2); */
/* } */

/* h5, */
/* h6 { */
/* font-size: var(--step-1); */
/* } */

mark {
  background-color: var(--color-accent-alt-transparent);
  color: var(--color-text-primary);
  padding: 0 0.2ch;
}

a {
  color: var(--color-accent-dustyblue);
  text-decoration: underline solid var(--color-text-tertiary);
  text-decoration-thickness: 1px;
  outline: none;
}

a:hover {
  /* text-shadow: -1px 1px 2px var(--color-accent-alt); */
  /* box-shadow: 1px 1px 0px var(--color-accent-alt); */
  background-color: var(--color-accent-alt-transparent);
  /* color: var(--color-crust); */
  /* font-size: 1.8ch; */
}

button {
  cursor: pointer;
  transition: background-color 0.3s ease;
  display: block;
  width: fit-content;
  margin: 5ch auto 1.5ch auto;
  padding: 0.8ch 1.4ch;
  border: 1px solid var(--color-text-secondary);
  border-radius: 5px;
}

button:hover {
  background-color: var(--color-accent-alt);
}

code {
  background-color: var(--color-surface);
}

pre {
  border: 1px solid var(--color-text-primary);
  padding: 0.5ch;
  height: min-content;

  code {
    background-color: transparent;
    overflow-x: scroll;
    display: inline-block;
    padding: 0;
    width: 100%;
    height: min-content;
    font-size: var(--step--1);
  }
}

kbd {
  border-radius: var(--radius);
  padding: 0.45ch 0.9ch;
  border: 1px solid var(--color-text-primary);
  box-shadow: 0 2px 0 1px var(--color-accent-burgundy);
}

blockquote {
  border-left: 2px solid var(--color-text-primary);
  margin: var(--space-3);
  padding: 0 1ch;
  background-color: var(--color-surface);
}

ul,
ol {
  padding-left: 2ch;
  margin: 1ch 0;
}

ul li,
ol li {
  margin-bottom: 0.5ch;
}

/* Checkbox list styles */
li input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 2.2ch;
  height: 2.2ch;
  border: 1px solid var(--color-text-primary);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
  position: relative;
  vertical-align: middle;
  margin-right: 0.5ch;
}

li input[type="checkbox"]:checked {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
}

li:has(input[type="checkbox"]) {
  list-style-type: none;
  margin-top: 0.5ch;
  margin-left: 2ch;
}

li input[type="checkbox"] {
  margin-left: -1.5em;
}

ul:has(input[type="checkbox"]) ul {
  border-left: 1px solid var(--color-text-primary);
  padding-left: 4ch;
}

input {
  background-color: var(--color-surface);
  border: 1px solid var(--color-text-primary);
  border-radius: var(--radius);
  padding: 0.8ch 1.2ch;
}

input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-alt);
}

table {
  border-collapse: separate;
  border-spacing: 0;
}

table thead,
table td,
table th,
table tr {
  border: 1px solid var(--color-text-primary);
}

table td,
table th {
  padding: 0.5rem;
  text-align: left;
}

table thead {
  font-weight: bold;
}

table thead tr {
  background-color: var(--color-accent);
}

table tbody {
  font-family: var(--font-mono);
}

table tbody tr td:first-child {
  background-color: var(--color-accent);
  font-weight: 500;
}

hr {
  border: none;
  width: 75%;
  margin: 4ch auto;
  border-top: 1px solid var(--color-text-primary);
}

aside {
  color: var(--color-text-quill);
  position: relative;
  float: right;
  clear: right;
  width: 15ch;
  margin: 0.3rem 0 0 1ch;
  padding-left: 1.5ch;
  font-size: var(--step--1);
  line-height: 1.3;
  border-left: 1px solid var(--color-text-primary);
}

/* FOOTNOTES */
hr:has(+ ol[class~="footnotes-list"]) {
  display: none;
}

.footnotes-list {
  border-top: 1px solid var(--color-text-primary);
  font-size: var(--fs-sm);
  padding: 2ch;
  padding-left: 2ch;

  li {
    margin-left: 2ch;
  }
}

video,
img,
audio {
  border-radius: 5px;
  max-width: 100%;
  height: auto;
}

svg {
  width: 100%;
  fill: var(--color-text-primary);
}

body {
  display: flex;
  margin: 0 2ch;
  padding: 0;
}

.left-sidebar,
.main-content,
.right-sidebar {
  padding: 3ch;
  overflow-wrap: break-word;
}

.left-sidebar {
  flex: 0 0 22%; /* does not grow & shrink, has a set size */
}

.right-sidebar {
  right: 0;
  order: 1; /* 1 is bigger then 0, so it goes last */
  flex: 0 22%;
}
.main-content {
  /* width: 35vw; */
  max-width: 60ch;
  margin: 0 auto;
  /* padding: 5ch; */
  flex: 1 auto; /* grows and shrinks */
  /* -webkit-box-shadow: 0px 0px 4px 5px rgba(174, 137, 100, 0.3); */
  /* box-shadow: 0px 0px 4px 5px rgba(174, 137, 100, 0.3); */
  border: 1px solid var(--color-text-tertiary);
  border-width: 0 1px 0 1px;
}

footer {
  margin-top: 4ch;
  font-size: var(--step-0);

  .footer-content {
    display: flex;
    justify-content: space-between;

    p {
      margin: 0 auto;
      flex: 1;
    }

    p:nth-child(1) {
      width: 20%;
    }

    p:nth-child(2) {
      width: 20%;
      text-align: right;
    }
  }
}

header {
  display: inline-block;
  padding: 0;
  height: min-content;

  svg {
    width: 100%;
  }
}

nav.main-nav {
  padding: 0;

  menu {
    display: flex;
    flex-wrap: wrap;
    gap: 1ch;
    list-style: none;
    padding: 0;
    margin: 0;

    li {
      flex: 1 1 50%;
      min-width: min-content;
      text-align: center;
      /* padding: 0.5ch; */
    }

    a {
      padding: 0.5ch;
      display: block;
      border: 1px solid var(--color-text-primary);
      text-decoration: none;
    }

    a:hover {
      background-color: var(--color-surface);
    }
  }
}

nav.main-nav menu li:hover,
nav.main-nav menu li:focus,
nav.main-nav menu li.active {
  background-color: var(--color-text-primary);
  color: var(--color-crust);
}

nav.main-nav menu a.active {
  font-weight: 700;
}

/* sidebar > social media links */

.social-links {
  display: flex;
  justify-content: space-around;
  margin: 2ch 0;
  text-wrap: balance;

  .social-icon {
    display: inline-block;
    width: 3ch;
    transition: transform 0.3s ease;
  }

  .social-icon:hover {
    transform: scale(1.4);
    background-color: unset;
    svg {
      fill: var(--color-accent);
    }
  }
}

/* .sidebar-grid > .sidebar > .toc */

.toc {
  position: sticky;
  overflow-y: auto;
  height: fit-content;
  /* padding-top: 2ch; */
  font-size: var(--step--1);
  top: 0;
  width: 100%;

  ul {
    list-style: none;
  }

  strong {
    font-weight: 600;
    margin: 0 auto 0.8ch auto;
  }

  ol {
    padding-left: 2ch;

    ul {
      padding-left: 2ch;
      font-size: 0.6em;

      li {
        display: list-item;
        list-style-position: outside;

        a {
          display: block;
          text-overflow: ellipsis;
          white-space: nowrap;
          overflow: hidden;
        }
      }
    }
  }
}

/* .sidebar-grid > .main-content */

main {
  display: block;
  padding: 0 1rem;
  min-height: 67vh;
}

main img {
  max-width: 100%;
}

/* TOP BUTTON */

#back-to-top {
  width: fit-content;
  margin: 2ch auto;
  background-color: var(--color-surface);
  padding: 0.5ch 1ch;
  border-radius: var(--radius);
  text-decoration: none;
  /* font-weight: 900; */
  border: 1px solid;
  display: block;
}

/* END OF MOBILE SECTION */

/* ==============================================
   BLOG 
   ============================================== */
.blog-posts {
  list-style-type: none;
  padding: unset;

  time {
    color: var(--text-light);
  }
}

/* From
https://sylvia-dev.bearblog.dev/blog-list-with-dates-on-right-leading-dots/ */

ul.blog-posts > li {
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
  align-items: flex-end;
  /* This matters when the font sizes
  for title and date are different, but otherwise can be deleted */
  margin: 1ch 0;
  border-bottom: 1px solid var(--color-text-tertiary);
}

ul.blog-posts > li > span + a,
ul.blog-posts > li > span:has(> i time) {
  margin-bottom: -5px;
  /* Brings the solid line up to baseline */
  background-color: var(--color-crust);
  /* Background color hides the dots behind text */
}

ul.blog-posts > li > span:has(> i time) {
  white-space: nowrap;
  padding-left: 0.3em;
}

ul.blog-posts > li > span + a {
  padding-right: 0.3em;
}

/* ==============================================
   LISTS 
      ============================================== */

.lists-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.list-item {
  border: 1px solid var(--color-text-tertiary);
  padding: 1ch;
  margin: 1ch 0;

  h2 {
    font-size: var(--fs-h456);
    margin: 0.25rem 0;
  }

  p {
    margin: 0.25rem 0;
    line-height: 1.3;
  }

  .list-meta {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: var(--fs-sm);

    .dates {
      display: flex;
      justify-content: space-between;
      gap: 1ch;

      time:first-of-type {
        color: var(--text-light);
      }

      .updated {
        margin-left: auto;
        color: var(--color-accent);
      }
    }
  }
}

.list-description {
  font-size: var(--fs-sm);
  margin-bottom: 1rem;
  display: block;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* TAGS */

.tag {
  color: var(--color-accent);
}
.tag:hover {
  color: var(--alt-accent);
}

/* ==============================================
   WIKI 
   ============================================== */

.wiki-stats {
  margin-bottom: 2rem;
  color: var(--text-light);
}

.wiki-page-list {
  list-style: none;
  padding-left: 0;
}
.page-card {
  border: 1px solid var(--text);
  padding: 0.5ch;
}

.page-card:hover {
  color: var(--text-light);
  .page-date {
    color: var(--color-);
  }
}

.page-card h3 {
  margin: 0 0 1rem 0;
}

.page-card h3 a {
  text-decoration: none;
  color: #007acc;
}

.page-card h3 a:hover {
  text-decoration: underline;
}

.page-date {
  color: var(--text-light);
}
.page-updated {
  color: var(--color-accent);
}

/* WIKI PAGINATOR CONTROLS */
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  margin-top: 2rem;
  font-weight: bold;
}

.pagination-link, .pagination-current {
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--text);
  text-decoration: none;
}

.page-card:hover, .pagination-link:hover {
  background-color: var(--text);
}

.pagination-current {
  background-color: var(--alt-accent);
  color: var(--color-crust);
}
.pagination-prevnex {
  color: var(--color-accent);
}

/* WIKIPEDIA LIST */

.wiki-list::before {
  content: "▲ NOW";
  position: absolute;
  top: -2em;
  left: -0.5em;
  font-size: 0.8em;
  opacity: 0.7;
}

.wiki-list::after {
  content: "▼ PAST";
  position: absolute;
  bottom: -2em;
  left: -0.5em;
  font-size: 0.8em;
  opacity: 0.4;
}

.wiki-entry {
  margin-bottom: 2em;
  position: relative;
  padding: 1em;
  transition: all 0.3s ease;
  animation: fadeIn 0.5s ease-out forwards;
}

.wiki-entry::before {
  content: "";
  position: absolute;
  left: -2em;
  top: 50%;
  width: 2em;
  border-top: 2px dotted var(--text);
  transition: all 0.3s ease;
}

.wiki-entry::after {
  content: "";
  position: absolute;
  left: -2.25em;
  top: calc(50% - 0.25em);
  width: 0.5em;
  height: 0.5em;
  background-color: var(--color-crust);
  border: 2px solid var(--text);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.wiki-entry:hover {
  transform: translateX(5px);
}

.wiki-entry:hover::after {
  background-color: var(--text);
  transform: scale(1.2);
}

.wiki-entry:hover::before {
  width: 2.5em;
  left: -2.5em;
}

.date {
  font-size: 0.9em;
  font-weight: bold;
  margin-bottom: 0.5em;
  opacity: 0.8;
  color: cadetblue;
}

.description {
  margin-top: 0.5em;
  line-height: 1.4;
  opacity: 0.9;
}

/* FILTERS & UTILS */
.filter {
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.filter + small {
  display: block;
  margin-bottom: 1.5rem;
}

.remove-filter {
  color: var(--color-crust);
}

.remove-filter:hover {
  text-decoration: underline;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Fuzzy Search Styles */

#fuzzySearchContainer {
  position: fixed;
  width:50vw;
  bottom: 1ch;
  left: 50%;
  transform: translateX(-50%); /* shift back half its own width */
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

#fuzzySearchInput {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-text-primary);
  border-radius: 4px;
  backdrop-filter: blur(10px) ;
  background:unset;
}
#fuzzySearchInput:focus {
  outline: 2px solid var(--color-accent);
  backdrop-filter: unset ;
  background-color: var(--color-surface);
}
#fuzzySearchInput::placeholder {
  font-size: 0.8em;
}

#fuzzySearchResults {
  position: absolute;
  bottom: 100%;
  width: 100%;
  /* background: var(--color-crust); */
  backdrop-filter: blur(10px) ;
  outline: 2px solid var(--color-accent);
  border: 1px solid var(--color-text-primary);
  border-bottom: none;
  border-radius: var(--radius) var(--radius) 0 0;
  max-height: 30ch;
  overflow-y: auto;
  z-index: 1000;
  display: none;
  translate: translateY(50%);
}

#fuzzySearchResults a {
  display: block;
  padding: 1ch;
  text-decoration: none;
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-text-primary);
}

#fuzzySearchResults a:hover,
#fuzzySearchResults a[aria-selected="true"] {
  background-color: var(--color-accent-burgundy);
  color: var(--color-crust);
}


#fuzzySearchResults a:last-child {
  border-bottom: none;
}

/* Keyboard shortcut indicator container */
.search-shortcut-indicator {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 2px;
  pointer-events: none;
  transition: opacity 0.2s ease;
  font-size: 11px;
  z-index: 10;
}

/* Hidden state when input is focused */
.search-shortcut-indicator.search-shortcut-hidden {
  opacity: 0;
}


/* Separator between keys (+ symbol) */
.search-shortcut-separator {
  font-size: 10px;
  margin: 0 1px;
}


/* Result title */
#fuzzySearchResults a > div:first-child {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 14px;
}

/* Result body preview */
#fuzzySearchResults a > div:nth-child(2) {
  font-size: 12px;
  line-height: 1.4;
}

/* Selected result body text */
#fuzzySearchResults a[aria-selected="true"] > div:nth-child(2) {
  opacity: 0.9;
}

/* Result URL */
#fuzzySearchResults a > div:last-child {
  font-size: 11px;
  color: var(--color-accent, #007acc);
  margin-top: 4px;
}

/* Selected result URL */
#fuzzySearchResults a[aria-selected="true"] > div:last-child {
  opacity: 0.8;
}

/* No results message */
#fuzzySearchResults > div {
  padding: 8px 12px;
  color: var(--color-text-sand);
}

/* MOBILE */

@media (max-width: 912px) {
  body,
  .left-sidebar,
  .main-content,
  .right-sidebar,
  .footer-content {
    display: block;
    padding: 0;
    width: auto;
  }
  .toc {
    padding-top: 2ch;
  }
#fuzzySearchContainer {
  position: relative;
  width: 100%;
  /* margin: 0.5ch; */
  margin-top: 1ch;
}
#fuzzySearchResults {
  bottom: unset;
}
.main-content {
  box-shadow: unset;
  border: unset;
  max-width: unset;

  article h1 {
    margin-top: 1ch;
  } 
}
  .left-sidebar {
    header {
      width: 60vw;
      margin: 0 auto;
      display: block;
      margin-top: 1ch;
    }

    /* text-wrap: balance technique from
    https://shkspr.mobi/blog/2024/10/you-can-use-text-wrap-balance-on-icons/ */
    .main-nav {
      text-align: center;
      margin: 0 auto;
      display: flow-root;

      menu {
        display: block;
        list-style: none;
        text-wrap: balance;
      }

      li {
        display: inline-block;
        position: relative;
        margin: 0.5ch;
        width: fit-content;
      }
    }

    .social-links,
    #fuzzySearchContainer {
      margin: 1ch 0;
    }
  }

  footer {
    margin: 0 0 4ch 0;
    hr {
      margin: 1ch auto;
    }
    .footer-content {
      display: block;
      p,
      p:nth-child(1),
      p:nth-child(2) {
        width: 100%;
        margin: 1ch auto;
        text-align: center;
      }
    }
  }

  aside {
    width: 10ch;
  }

  .search-shortcut-indicator {
    display: none;
  }

  /* Remove extra padding when shortcut is hidden */
  .search-input-with-shortcut {
    padding-right: 8px;
  }
}