// Structures page

$btn-background-color: $menu-background-color;
$btn-text-color: $menu-font-color;
$input-border-color: #bfbfbf;

.ot-structures {
  @include flex;
  flex-direction: row;

  .structure-controls {
    order: 1;
    flex: 1;
  }

  .structure-results {
    order: 0;
    flex: 1;
  }

  .structure-controls, .structure-results {
    @include flex;
    flex-direction: column;
    margin: 0 1.5em;
  }

  .structure-search {
    @include flex;
    flex-direction: column;
    margin-bottom: 2em;
  }

  h3 {
    font-size: 1.2em;
    font-weight: bold;
  }

  .structure-search form {
    @include flex;
    flex-direction: column;
  }

  .structure-search form input, button {
    margin-bottom: 1em;
    line-height: 1.4em;
    font-size: 1.1em;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 6px 12px;
  }

  .structure-search form button {
    border: solid 2px $content-a-color;
    color: $content-a-color;
  }

  .structure-search form button:hover {
    background-color: #d8edf3;
    cursor: pointer;
  }

  #structure-map {
    height: 400px;
    width: 100%;
    align-self: flex-end;
  }

  .structure {
    @include flex;
    flex-direction: column;
    border-bottom: solid 2px $otbox-header-background-color;
    border-radius: 4px;
    height: 200px;
    padding: 1em;
    justify-content: space-around;
  }

  .structure-preview {
    @include flex;
    flex-direction: row;
    align-items: center;
  }

  .structure-preview .structure-poster {
    flex: 1;
    @include flex;
    flex-direction: column;
    align-items: center;
  }

  .structure-preview .structure-poster img {
    width: auto;
    max-width: 100%;
    min-width: 40%;
    height: auto;
    margin-right: 4em;
  }

  .structure-preview .structure-summary {
    flex: 2;
    @include flex;
    flex-direction: column;
  }

  .structure-preview .structure-summary > span {
    margin-bottom: 0.5em;
  }

  .structure-preview .structure-name {
    font-size: 1.4em;
    color: #333333;
    font-weight: bold;
  }

  .structure-preview .structure-loc-date {
    font-size: 1.1em;
    color: #4d4d4d;
    font-weight: bold;
  }

  .structure-preview .structure-description {
    color: #4d4d4d;
  }

  .structure-see {
    align-self: stretch;
    padding: 0.4em 0.8em;
    font-size: 1.1em;
    margin-top: 0.4em;
    @include flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }

  .structure-see:hover {
    text-decoration: none;
    font-weight: bold;
  }
}
