@import "~@/styles/forSize.mixin";

#event-proposal {
  header {
    background-color: #FFFCFC;
    border-bottom: thin solid #aaa;
    padding: 0.5em;

    h1, h2 {
      margin: 0;
      margin-top: 0.5em;
      padding: 0;
    }

    h2 {
      font-weight: normal;
      margin-bottom: -0.30em;
    }

  }

  &.success header { background-color: #38b00010; }
  &.error header { background-color: #d9042910; }

  form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;

    fieldset {
      border: none;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      margin: 0.5em;
      padding: 0;
      width: calc(100% - 1em);
    }
  }

  label {
    margin: 0.5em;
    display: flex;

    input, textarea, select { flex-grow: 1; }
  }

  .invalid-message {
    display: flex;
    margin: 0.5em;
    color: #d90429;
    font-style: italic;
    justify-content: center;
  }

  .actions {
    display: flex;
    justify-content: center;
    margin: 0.5em;

    button svg {
      position: relative;
      margin: 0 0.125em;
      top: 0.125em;
    }
  }

  &.success button {
    color: #38b000;
    background-color: #38b00010;
    border-color: #38b000;
  }

  &.error button {
    color: #d90429;
    background-color: #d9042910;
    border-color: #d90429;
  }
}

.successes, .errors { margin: 0.5em auto; }

.successes { color: #38b000; }
.errors { color: #d90429; }

@include forSize(mobile) {
  #header-splash {
    width: 100%;
  }

  #event-proposal {
    padding: 0 1em;
    width: 100%;

    label {
      flex-wrap: wrap;

      span { width: 100%; }
      input, select, textarea {
        margin: 0.125em 1em;
        width: 100%;
      }
    }
  }
}

@include forSize(notMobile) {
  #header-splash {
    object-fit: cover;
    object-position: center 56%;
    width: 100%;
    height: 20em;
  }

  #event-proposal {
    border: solid thin #bbb;
    border-radius: 0.25em;
    box-shadow: 0.25em 0.25em 0.75em #aaa;
    margin: 2em auto;
    width: 30em;

    label span { width: 9em; }
  }

  .successes, .errors { width: 26em; }
}