@use "./colors";

.runner .popup-window-container {
  all: unset;

  $radius: 24px;

  background: rgba($color: colors.$bg-primary, $alpha: .8);
  border-radius: $radius;
  box-shadow: inset 0 0 0 1px colors.$bg-secondary, 
    0 0 8px 1px colors.$bg-translucent;

  padding: 4px;

  & entry {
    transition: 80ms ease-in;
    min-height: 1.6em;
    padding: 14px;
    border-radius: inherit;
    background: none;

    &:focus {
      box-shadow: none;
    }

    & image {
      margin-right: 6px;
      -gtk-icon-size: 16px;
    }
  }

  & scrolledwindow {
    margin: 6px;
  }

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

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

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

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

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

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

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