@import "../pages/mixins";

.result-item {
  background-color: var(--accent);
  color: snow;
  text-decoration: none;
  padding: 5px;
  display: flex;
  flex: 1 1 250px;
  flex-direction: row;
  align-items: center;
  flex-wrap: nowrap;
  &:hover {
    text-decoration: none;
  }

  & .col-l {
    display: flex;
    flex-direction: column;
    margin-right: 5px;
    flex-shrink: 0;
    & .icon-container {
      background-color: var(--white);
      border-radius: 50%;
      z-index: var(--foreground);
      width: 36px;
      height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin: 5px;
      & .icon {
        display: block;
        height: 20px;
        width: 20px;
      }
    }
  }

  & .col-r {
    display: flex;
    flex-direction: column;
    & .name {
      @add-mixin font-xs;
      @add-mixin heading-font;
      color: var(--white);
      text-transform: uppercase;
      z-index: var(--foreground);
      text-align: left;
      line-height: 1em;
    }
    & .type {
      @add-mixin font-xxs;
      @add-mixin body-font;
      color: var(--white);
    }
  }
}
