@use "./colors";

.runner.main {
  background: colors.$bg-translucent;
  padding: 12px;
  border-radius: 24px;

  & entry {
    background: colors.$bg-primary;
    padding: 10px 9px;
    border-radius: 12px;

    &:focus {
      box-shadow: inset 0 0 0 2px colors.$bg-secondary;
    }

    & image.left {
      margin-right: 6px;
    }
  }

  & list {
    & > *:selected > .result,
    & > *:active > .result,
    & > *:hover > .result {
      background: colors.$bg-secondary;
    }

    & > *:first-child {
      margin-top: 12px;
    }

    &:last-child {
      margin-bottom: 0;
    }
  }

  & list .result {
    padding: 10px;
    background: colors.$bg-primary;
    margin: 2px 0;
    border-radius: 14px;

    & icon {
      font-size: 28px;
      margin-right: 6px;
    }

    & .title {
      font-weight: 500;
      font-size: 16px;
    }

    & .description {
      font-size: 12px;
      color: colors.$fg-disabled;
    }
  }

  & .not-found {
    padding-top: 24px;

    & icon {
      font-size: 64px;
      margin-bottom: .4em;
    }

    & label {
      font-size: 16px;
    }
  }
}