@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-style: normal;
  src: url('/fonts/Poppins-Medium.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 600;
  font-style: normal;
  src: url('/fonts/Poppins-SemiBold.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 700;
  font-style: normal;
  src: url('/fonts/Poppins-Bold.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 800;
  font-style: normal;
  src: url('/fonts/Poppins-ExtraBold.ttf');
}

@font-face {
  font-family: 'Poppins';
  font-weight: 900;
  font-style: italic;
  src: url('/fonts/Poppins-BlackItalic.ttf');
}

:root {
  --background: beige;
  --foreground: #1C1C1C;
  --border-color: var(--foreground);
  --explainer-prefix-opacity: 1;
  --explainer-color-1: var(--foreground);
  --explainer-color-2: var(--foreground);
  --explainer-color-3: var(--foreground);
  --explainer-color-4: var(--foreground);
}

* {
  padding: 0;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: 'Poppins', sans-serif;
  font-size: 18px;
  color: var(--foreground);
  background-color: var(--background);
  font-weight: 500;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

#app {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.brick-maker {
  display: flex;
  flex-wrap: wrap;
  background-color: var(--border-color);
  border: solid 2px var(--border-color);
}

.brick-maker-bit {
  background-color: white;
  cursor: pointer;
  transition: background-color .15s;
  position: relative;

  [data-labels="true"] &:after {
    content: attr(data-value);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 900;
  }

  [data-labels="true"] &[data-y="0"]:after {
    color: var(--explainer-color-1);
  }

  [data-labels="true"] &[data-y="1"]:after {
    color: var(--explainer-color-2);
  }

  [data-labels="true"] &[data-y="2"]:after {
    color: var(--explainer-color-3);
  }

  [data-labels="true"] &[data-y="3"]:after {
    color: var(--explainer-color-4);
  }

  &[data-active="Y"][data-y] {
    background-color: var(--color);

    &:after {
      color: white;
    }

  }

}

h1 {
  text-align: center;
  line-height: 1;
  font-size: 28pt;

  span {
    transition: all .15s;

    &.prefix {
      opacity: var(--explainer-prefix-opacity);
    }

    &.col-1 {
      color: var(--explainer-color-1);
    }

    &.col-2 {
      color: var(--explainer-color-2);
    }

    &.col-3 {
      color: var(--explainer-color-3);
    }

    &.col-4 {
      color: var(--explainer-color-4);
    }

  }

}

button {
  border: 0;
  font-size: inherit;
  cursor: pointer;
}

.buttons {
  display: flex;
  gap: 10px;
  flex-direction: column;
  align-items: center;
  flex-wrap: wrap;
  padding-top: 10px;

  button {
    padding: 10px 20px;
    background-color: magenta;
    color: white;
    font-weight: bold;
    border-radius: 4px;
  }
}

button.explainer {
  padding: 5px 10px;
  background-color: transparent;
  color: #8F8F8F;
  font-weight: 500;
}

.prompt {
  position: absolute;
  background-color: white;
  border-radius: 10px;
  padding: 10px;
  bottom: -160px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100vw - 40px);
  max-width: 370px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.5);

  &[data-active="false"] {
    display: none;
  }

  .prompt-body {
    padding: 0 5px;
    line-height: 1.3;
  }

  .prompt-foot {
    display: flex;
    justify-content: end;
    padding-top: 15px;
    button {
      padding: 10px 20px;
      font-weight: 700;
      background-color: magenta;
      color: white;
      border-radius: 8px;
    }
  }

}