@import "variables";
@import "mixins";

.widget-popover {
  position: absolute;
  right: 0;
  display: flex;
  flex-direction: column;
  background-color: $color-white;
  padding: 0;
  z-index: 100;
  @include widget-shadow;

  &--mobile {
    left: 0;
    right: inherit;
  }
}

.popover-links {
  list-style: none;
  display: grid;

  &__icon {
    width: 25px;
    height: 25px;
    margin-right: $small-spacing;
  }

  &__link-with-icon {
    display: flex;
    align-items: center;
  }

  &__link {
    cursor: pointer;
    padding: 0 $medium-spacing;

    & > a {
      display: inline-block;
      color: $color-silver-dark;
      font-family: $sans-serif-font-family;
      font-size: toRem(14px);
      line-height: 1.5;
      padding: 5px 0;
      cursor: pointer;
    }

    &--large {
      line-height: 40px;
      padding: $small-spacing $medium-spacing;

      & > a, & {
        @include small-text;
      }
    }

    &--emph {
      @include regular-text;
      font-weight: 600;
    }
  }

  &__divider {
    border-top: 1px solid $color-silver-dark;
  }
}