/*
#####################################
        growing searchbar
#####################################
*/

:root {
  /* Color Theme Swatches in Hex */
  --clr-btn-txt: rgb(200, 190, 190);
  --clr-yellow-1: hsl(46, 96%, 51%);

  --clr-yellow-2: hsl(46, 66%, 49%);

  --clr-brown-1: rgb(166, 142, 63);

  --clr-brown-2: hsl(46, 30%, 37%);

  --clr-brown-3-5: #787054;

  --clr-brown-3: hsl(46, 18%, 27%);

  --clr-brown-4: hsl(45, 18%, 24%);

  --clr-brown-5: hsl(47, 18%, 20%);

  --clr-brown-6: hsl(47, 18%, 15%);

  --clr-brown-7: hsl(47, 18%, 10%);

  --clr-primary-black: hsl(30, 8%, 5%);
  --clr-primary-white: hsl(0, 0%, 100%);

  --clr-bg: hsl(47, 18%, 10%);

  /* Text */
  --txt-primary-font: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  --txt-ltr-spacing: 0.025rem;

  /* border radius */
  --corner-rad: 4rem;
  --corner-rad-sm: 0.25rem;

  --transition: 0.025s;
}

*,
:before,
:after {
  margin: 0;
  padding: 0;
  font-size: 16px;
  box-sizing: border-box;
}

html {
  background-color: var(--clr-bg);
  font-family: var(--txt-primary-font);
  color: var(--clr-yellow-2);
}

.container {
  display: flex;
  margin: 1rem auto;
  width: 80vw;
}

.sb-label {
  /* hide lable text from sceren readers */
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.sb {
  align-self: flex-start;
  border: none;
  width: 10ch; /* must set a relative val for transition to work */
  padding: 0.125rem;
  border-radius: var(--corner-rad-sm);
  transition: all var(--transition);
}

.sb:focus {
  outline: none;
  box-shadow: 2px 2px var(--clr-yellow-1), -2px 2px var(--clr-yellow-1),
    -2px -2px var(--clr-yellow-1), 2px -2px var(--clr-yellow-1);
  width: 80%;
}

.sb::placeholder {
  font-weight: bold;
  letter-spacing: var(--txt-ltr-spacing);
}

.sb:focus::placeholder {
  color: transparent;
  border: 4px solid var(--clr-yellow-1);
}