#notifications-state {
  border-radius: 5px;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;

  p {
    padding: 0.2rem 0.5rem;
    &:before {
      font-size: 200%;
      padding: 1rem;
    }
  }

  &.subscribe {
    border: solid 1px var(--pico-switch-background-color);
    p:before {
      content: "🔕";
    }
  }

  &.already, &.successful {
    border: solid 1px var(--pico-form-element-valid-border-color);
    p:before {
      content: "🔔";
    }
  }

  &.unavailable {
    border: solid 1px var(--pico-form-element-invalid-active-border-color);
    p:before {
      content: "🔕";
    }
  }
}