sparkletown/sparkle

@import "scss/constants.scss";

$icon-padding: $spacing--xs;
$icon-base-size: 34px;
$icon-size: $icon-padding + $icon-base-size;

.PortalListItem {
  margin: 0;
  padding: 0;

  &__list-item {
    padding: $spacing--md;
    margin: $spacing--xs;
    display: flex;
    flex-direction: row;
    align-items: center;
    border-radius: $border-radius--md;
    cursor: pointer;

    &:focus,
    &:focus-within {
      outline: 1px dotted $content--over;
    }

    &:hover {
      background-color: var(--content--over-10a);
    }
  }

  &--selected &__list-item {
    background-color: var(--content--over-10a);
  }

  &__icon {
    @include square-size($icon-size);
    padding: $icon-padding;
    margin-right: $spacing--sm;
    background-size: contain;
    background-position: center;
    border-radius: $border-radius--xs;
    box-shadow: 0 0 0 2px $accent--under;
  }
}