/* Globals */
:root {
  --main-bg-color: rgb(223, 223, 223);
  --secondary-bg-color: rgba(20, 20, 20, 0.7);
  --ternary-bg-color: rgba(175, 175, 175, 0.7);
  --main-fg-color: black;
  --secondary-fg-color: rgb(210, 210, 210);
  --main-accent-color: rgb(253, 122, 0);
  --disabled-color: gray;
  --green: green;
  --default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
  --error-color-translucent: rgba(193, 0, 0, 0.87);
  --error-color: rgba(255, 0, 0);
}
@supports (color: color(display-p3 1 1 1)) {
  :root {
    --main-accent-color: color(display-p3 0.927 0.506 0.028)
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --main-bg-color: rgb(48, 48, 48);
    --secondary-bg-color: rgba(10, 10, 10, 0.7);
    --ternary-bg-color: rgba(10, 10, 10, 0.7);
    --main-fg-color: white;
    --secondary-fg-color: rgb(210, 210, 210);
    --main-accent-color: rgb(253, 122, 0);
    --disabled-color: gray;
    --green: green;
    --default-shadow: 3px 3px 10px 1px var(--secondary-bg-color);
    --error-color-translucent: rgba(255, 0, 0, 0.3);
    --error-color: rgba(255, 0, 0);
  }
  @supports (color: color(display-p3 1 1 1)) {
    :root {
      --main-accent-color: color(display-p3 0.927 0.506 0.028)
    }
  }
}

@media (prefers-color-scheme: light) {
  ::placeholder {
    opacity: 1;
    color: rgb(73, 73, 73);
  }
  :-ms-input-placeholder {
    color: rgb(73, 73, 73);
  }
  ::-ms-input-placeholder {
    color: rgb(73, 73, 73);
  }
}

a:visited, a {
  color: var(--main-accent-color);
}

a svg {
  stroke: var(--main-accent-color);
  width: 1.5em;
  height: 1.5em;
  stroke-width: 0.5em;
}

a svg .filled {
  fill: var(--main-accent-color);
}

body {
  background: var(--main-bg-color);
  color: var(--main-fg-color);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Cantarell, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  display: flex;
  flex-direction: column;
}

main {
  flex-grow: 1;
}

button {
  background-color: var(--main-accent-color);
  outline: 1px solid var(--main-fg-color);
  color: var(--main-fg-color);
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

button:hover:not(:disabled) {
  box-shadow: 4px 6px 3px 0 var(--secondary-bg-color);
  transform: translate(-2px, -2px);
}

button:disabled {
  background-color: var(--disabled-color);
  cursor: not-allowed;
}

.hidden {
  display: none !important;
}

.disabled {
  cursor: not-allowed;
  pointer-events: none;
  color: var(--disabled-color) !important;
}

.disabled svg {
  stroke: var(--disabled-color) !important;
}

/* Header */
header {
  display: flex;
  align-items: center;
  padding: 8px;
  margin-bottom: 8px;
  background: var(--secondary-bg-color);
  box-shadow: var(--default-shadow);
  color: var(--secondary-fg-color);
}

.spacer {
  flex-grow: 1;
}

.linklabel {
  margin-left: 0.1em;
}

.linkcontents {
  display: flex;
  align-items: center;
}

header a, footer a {
  margin-right: 1em;
}

header .newpolllink svg {
  stroke-width: 1em;
}

header .avatar {
  width: 30px;
  height: 30px;
  margin-right: 4px;
}

@media (max-width: 450px) {
  .linklabel {
    display: none;
  }
}
@media (max-width: 380px) {
  .greeting {
    display: none;
  }
}

/* Polls */
.poll {
  display: inline-block;
}

.poll .header {
  margin-bottom: 8px;
}

.poll .user {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.poll .user .avatar {
  margin-right: 8px;
  box-shadow: var(--default-shadow);
}

.poll .user .usernamewrapper {
  display: flex;
  align-items: center;
}

.datewrapper {
  display: grid;
  grid-column-gap: 8px;
  margin-left: 8px;
}

.created_at {
  grid-row: 1;
}
.closed_at {
  grid-row: 2;
}
datewrapper time {
  grid-column: 2;
}

.options form {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-column-gap: 8px;
}

.votes-remaining {
  font-size: small;
}
.poll .header .user .avatar {
  width: 50px;
  height: 50px;
}
.option-responses .avatar {
  width: 20px;
  height: 20px;
}

@media (max-width: 450px) {
  .poll-grid .poll .user {
    flex-direction: column;
    align-items: start;
  }
  .datewrapper {
    margin-left: 0;
  }
}

@media (max-width: 380px) {
  .poll .user {
    flex-direction: column;
    align-items: start;
  }
}

/* Success banner */
.banner-wrapper {
  cursor: pointer;
  transition: all 0.25s ease-in-out;
  box-sizing: border-box;
}

.banner {
  padding: 8px;
  display: inline-block;
  margin-bottom: 8px;
  box-shadow: var(--default-shadow);
}

.banner.success {
  background-color: var(--green);
}
.banner.error {
  background-color: var(--error-color);
}

.banner-wrapper.hiding {
  transform: translateX(-200%);
}
.banner-wrapper.resizing {
  height: 0px;
  width: 0px;
  box-shadow: 0px;
  padding: 0px;
}

.banner span {
  font-size: x-large;
  margin-right: 8px;
}

/* Poll creation */

.create-poll {
  display: grid;
  max-width: 400px;
  grid-auto-columns: auto 1fr;
  grid-column-gap: 8px;
}
.create-poll input[type=text],
.create-poll input[type=number],
.create-poll input[type=checkbox] {
  grid-column: 2;
}
.create-poll input[type=number] {
  max-width: 3em;
  background-color: var(--ternary-bg-color);
  color: var(--main-accent-color);
}
.create-poll input[type=text] {
  display: block;
  width: 100%;
  background-color: var(--ternary-bg-color);
  color: var(--main-accent-color);
}
.create-poll input[type=text]:focus {
  outline: 1px solid var(--main-accent-color);
}
.create-poll label {
  grid-column: 1;
}
.create-poll label[for=options] {
  grid-row: 2;
}
.create-poll #options {
  grid-row: 2;
}
.create-poll label[for=anonymous] {
  grid-row: 3
}
.create-poll label[for=public] {
  grid-row: 4
}
.create-poll label[for=max_options] {
  grid-row: 5
}
.create-poll label[for=duration] {
  grid-row: 6
}
#duration {
  grid-row: 6;
}
.create-poll button[type=submit] {
  grid-row: 8;
}
.create-poll .error {
  grid-column: 1/3;
  grid-row: 7;
  background-color: var(--error-color-translucent);
}
.create-poll .error:not(:empty) {
  margin: 8px;
}
.post-poll textarea {
  background-color: var(--secondary-bg-color);
  color: var(--main-text-color);
}

@media (max-width: 800px) {
  #prompt {
    grid-row: 2;
  }
  label[for=prompt] {
    grid-row: 2;
  }
  .create-poll label[for=options] {
    grid-row: 3;
  }
  .create-poll #options {
    grid-row: 3;
  }
  .create-poll label[for=anonymous] {
    grid-row: 4
  }
  .create-poll label[for=public] {
    grid-row: 5
  }
  .create-poll label[for=max_options] {
    grid-row: 6
  }
  .create-poll label[for=duration] {
    grid-row: 7
  }
  #duration {
    grid-row: 7;
  }
  .create-poll button[type=submit] {
    grid-row: 8;
  }
  .create-poll .error {
    grid-row: 1;
  }
}

/* Footer */
footer {
  display: flex;
  align-items: center;
  padding: 8px;
  background: var(--secondary-bg-color);
  box-shadow: var(--default-shadow);
  font-size: smaller;
}

footer .sourcecode svg {
  stroke-width: 1.5em;
}

/* Deal with the pill on iOS */
@supports (padding: env(safe-area-inset-left)) {
  @media (max-width: 1000px) {
    header {
      padding-left: max(env(safe-area-inset-left, 20px), 8px);
      padding-right: env(safe-area-inset-right, 20px);
      padding-top: calc(env(safe-area-inset-top, 20px) + 8px);
    }
    footer {
      padding-left: calc(env(safe-area-inset-left, 20px) + 8px);
      padding-right: env(safe-area-inset-right, 20px);
      padding-bottom: max(env(safe-area-inset-bottom, 20px), 8px);
    }
    main {
      padding-left: max(env(safe-area-inset-left, 20px), 8px);
      padding-right: max(env(safe-area-inset-right, 20px), 8px);
    }
    body {
      margin: 0;
    }
  }
}

/* Poll grid */
.poll-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.poll-grid .poll {
  display: initial;
  padding: 8px;
  border: 2px solid var(--main-accent-color);
  margin: 8px;
  transition: all 0.2s;
  cursor: pointer;
  width: 500px;
}

.poll-grid .poll:hover {
  box-shadow: 4px 6px 3px 0 var(--secondary-bg-color);
  transform: translate(-2px, -2px);
}

/* Other */

form.polltoken-input {
  margin-top: 8px;
}