@use "sass:color";
@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;
    }
  }

  & list {
    padding: 0 12px;
    & .result {
      padding: 10px;
      background: linear-gradient(
        135deg,
        color.change($color: colors.$bg-primary, $alpha: 0.9),
        color.change($color: colors.$bg-secondary, $alpha: 0.7)
      );
      margin: 6px 0;
      border-radius: 18px;
      border: 1px solid transparent;

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

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

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

    & > *:selected .result,
    & > *:active .result {
      background: linear-gradient(
        135deg,
        color.change($color: colors.$bg-secondary, $alpha: 0.95),
        color.change($color: colors.$bg-tertiary, $alpha: 0.8)
      );

      border-color: colors.$bg-tertiary;
      box-shadow: 0 0 0 1px colors.$bg-tertiary;

      & .title {
        font-weight: 700;
      }
    }
  }
}