@import "https://unpkg.com/open-props";
@import "https://unpkg.com/open-props/normalize.min.css";
@import "https://unpkg.com/open-props/buttons.min.css";
@import "./layout.css";
@import "./quill.css";

@view-transition {
  navigation: auto;
}

header {
  margin-block-end: var(--size-2);
}

.selected {
  background-color: var(--gray-2);
}

.editor .ql-editor {
  min-height: 10em;
}

.thread, .post {
  border: var(--border-size-1) solid var(--gray-1);
  border-radius: var(--radius-2);
  margin-block: var(--size-2);
  padding-block: var(--size-2);
  padding-inline: var(--size-1);
}

#posts, #threads {
  padding: var(--size-7);
  position: relative;
  border: var(--border-size-1) solid var(--gray-1);


  &::before, &::after {
    content: '';
    position: absolute;
    background: url('data:image/svg+xml,<svg viewBox="0 0 100 130" xmlns="http://www.w3.org/2000/svg"><filter id="inset-shadow"><feOffset dx="0" dy="0" /><feGaussianBlur stdDeviation="10" result="offset-blur" /><feComposite operator="out" in="SourceGraphic" in2="offset-blur" result="inverse" /><feFlood flood-color="black" flood-opacity=".95" result="color" /><feComposite operator="in" in="color" in2="inverse" result="shadow" /><feComposite operator="over" in="shadow" in2="SourceGraphic" /></filter><g filter="url(%23inset-shadow)"><rect y="40" x="15" width="70" height="50" rx="5" fill="white" /></g></svg>');
    top: 0;
    width: var(--size-5);
    height: 100%;
  }

  &::before {
    left: var(--size-1);
  }
  &::after {
    right: var(--size-1);
  }

  & h1 {
    border: var(--border-size-1) solid var(--gray-1);
    border-radius: var(--radius-2);
    margin-block: var(--size-2);
    padding-block: var(--size-2);
    padding-inline: var(--size-1);
  }
}

#new-post {
    border: var(--border-size-1) solid var(--gray-1);
    border-radius: var(--radius-2);
}