nukeop/nuclear

@import "../../common.scss";

.search_box_dropdown {
  position: absolute;
  display: flex;
  flex-flow: column;
  top: 100%;
  left: 0;
  right: 0;
  padding: 8px;
  background: $background;
  color: $white;
  box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.18), 0px 5px 20px 0px rgba(0, 0, 0, 0.09);
  z-index: 100;

  .search_history_header {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    margin-bottom: 8px;

    a {
      display: flex;
      align-items: center;
      color: rgba($grey, 0.6);

      &:hover,
      &:active,
      &:focus {
        color: $white;

        i.fitted.icon {
          color: $white;
        }
      }
    }

    i.fitted.icon {
      width: auto;
      height: auto;
      margin-left: 1em !important;
      margin-top: 4px !important;
      color: rgba($grey, 0.6);
    }

    label {
      color: rgba($grey, 0.6);
    }
  }

  .search_history_entry {
    font-size: 16px;
    padding: 4px 8px;
    cursor: pointer;

    &:hover {
      background: rgba($background2, 0.6);
    }
  }

  .search_history_footer {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding: 8px;
    background: rgba($background2, 0.4);
    
    label {
      width: auto;
      margin-bottom: 12px;
    }

    .search_examples {
      display: flex;
      flex-flow: row;
      justify-content: space-evenly;
      min-width: 400px;
      max-width: 100%;
    }

    .search_example {
      display: flex;
      flex-flow: column;
      justify-items: center;
      align-items: center;

      i {
        width: auto;
        height: auto;
        margin-right: 0;
      }
    }
  }

  hr {
    width: 100%;
    margin: 0.5em 0;
  }
}