@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;
  width: max-content;

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

.popover-links {
  list-style: none;
  display: flex;
  flex-direction: column;
  padding: $small-spacing;

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

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

  &__link {
    cursor: pointer;
    padding: 0 $medium-spacing;
    box-sizing: border-box;
    position: relative;

    display: flex;
    flex-shrink: 0;
    flex-grow: 1;
    width: auto;


    & > a {
      @include popover-link;
    }

    &--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;
  }
}