// Move contextual links to right of element on large screens.
.contextual {
  width: 2rem;
  top: 0;

  @include breakpoint(xl) {
    right: -2rem;
    border-radius: 0 1rem 1rem 0;
  }

  .trigger {
    margin: 2px 0 2px 3px;
    border-color: $color-info;
    border-width: 2px;
  }

  &.contextual-open .trigger,
  .focus & .trigger {
    border-color: $color-info;
    border-width: 2px;

    @include breakpoint(xl) {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      border-left: none;
      background-position: 2px center;
    }
  }
}

.contextual-region .contextual .contextual-links li a {
  &:hover {
    background: $color-interaction !important;
  }
}

.contextual-region.focus {
  outline-color: $color-info;
}
